您的位置:

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

一、使用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表示垂直居中。