水平居中的方法
- 元素为行内元素,设置父元素
text-align:center
- 如果元素宽度固定,可以设置左右
margin
为auto
; - 绝对定位和移动:
absolute + transform
- 使用
flex-box
布局,指定justify-content
属性为center display
设置为tabel-ceil
垂直居中的方法
-
将显示方式设置为表格,
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%*/
}
- 绝对定位配合 CSS3 位移
.vertical {
position: absolute;
top:50%; /*父元素高度50%*/
transform:translateY(-50%, -50%);
}
- CSS3弹性盒模型
.container {
display:flex;
justify-content: center; /*子元素水平居中*/
align-items: center; /*子元素垂直居中*/
}