- 将显示方式设置为表格,
display:table-cell
,同时设置vertial-align
:middle
- 使用
flex
布局,设置为align-item:center
- 绝对定位中设置
bottom:0,top:0
,并设置margin:auto
- 绝对定位中固定高度时设置
top:50%
,margin-top
值为高度一半的负值 - 文本垂直居中设置
line-height
为height
值 - 如果是单行文本,
line-height
设置成和 height
值
.vertical {
height: 100px;
line-height: 100px;
}
.container {
position: relative;
}
.vertical {
height: 300px; /*子元素高度*/
position: absolute;
top:50%; /*父元素高度50%*/
margin-top: -150px; /*自身高度一半*/
}
- 未知高度的块级父子元素居中,模拟表格布局
- 缺点:
IE67
不兼容,父级 overflow:hidden
失效
.container {
display: table;
}
.content {
display: table-cell;
vertical-align: middle;
}
- 新增
inline-block
兄弟元素,设置 vertical-align
- 缺点:需要增加额外标签,
IE67
不兼容
.container {
height: 100%;/*定义父级高度,作为参考*/
}
.extra .vertical{
display: inline-block; /*行内块显示*/
vertical-align: middle; /*垂直居中*/
}
.extra {
height: 100%; /*设置新增元素高度为100%*/
}
.vertical {
position: absolute;
top:50%; /*父元素高度50%*/
transform:translateY(-50%, -50%);
}
.container {
display:flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}