让文字垂直居中的几种方法

小蓝 • 2024-12-24 03:02 • 编程

一、使用Flexbox布局

Flexbox布局是一种全新的布局模式，可以通过属性控制子元素的排列和尺寸。利用Flexbox的align-items属性可以让元素垂直居中。

.container {
   display: flex;
   align-items: center;
}

这里的.container是父元素的样式，display:flex表示这是一个Flexbox容器，align-items:center表示让子元素垂直居中。

二、使用table-cell和vertical-align属性

如果在父元素设定display: table，子元素设定display: table-cell，还可以使用vertical-align: middle属性让子元素垂直居中。

.container {
   display: table;
   height: 200px;
}
.center {
   display: table-cell;
   vertical-align: middle;
}

这里的.container是父元素的样式，display:table使父元素变成一个表格，height:200px样式设定容器高度。center是子元素的样式，display:table-cell表示子元素是一个表格单元，vertical-align:middle表示垂直居中。

三、使用position:absolute和transform属性

如果父元素设定position:relative，子元素设定position:absolute和transform属性，就可以使用translateY（父元素高度-子元素高度）/2的值让子元素垂直居中。

.container {
   position: relative;
   height: 200px;
}
.center {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
}

这里的.container是父元素的样式，position:relative表示父元素定位方式为相对定位，height:200px表示父元素高度。center是子元素的样式，position:absolute表示子元素定位方式为绝对定位，top:50%表示定位到父元素顶部50%的位置，transform:translateY(-50%)表示向上平移自身高度的50%。

四、使用line-height属性

除了以上三种方法，还可以通过设置行高（line-height）等于容器高度（height）来让子元素垂直居中。

.container {
   height: 200px;
   line-height: 200px;
}

这里的.container是父元素的样式，height:200px和line-height:200px表示父元素和子元素的高度都为200px。

五、使用伪元素实现

最后一种方法是使用伪元素:before实现垂直居中。

.container:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
.center {
   display: inline-block;
   vertical-align: middle;
}

这里的.container是父元素的样式，:before是伪元素选择器，content:”表示向:before选择器中插入内容，display:inline-block表示伪元素是一个内联块元素，height:100%表示伪元素的高度与父元素一样高，vertical-align:middle表示垂直居中。center是子元素的样式，display:inline-block表示子元素是一个内联块元素，vertical-align:middle表示垂直居中。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/289515.html