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