一. 水平居中
<1> 文本、行内、行内块元素
text-align
: center
缺点: 只对行内内容有效
<2> 单个块级元素
定宽
+margin :0 auto
<3> 多个块级元素
转换为行内块元素 + text-align : center
<4> 绝对定位
行内、块级元素均可!!!
<5> flex 布局
justify-content
or align-items
只需调整flex容器中,元素的对齐方式即可。功能强大!!
二. 垂直居中
<1> 单行
文本、行内(图片下面另说!!)、行内块元素
- 设置父元素的 line-height 与 height 为同一值
缺点: 只能用于单行行内内容!!
<2> 图片 img
原理:vertical-align和line-height的好基友关系~
#parent{
height: 150px;
line-height: 150px;
font-size: 0;
}
img#son{
vertical-align: middle
;} /*默认是基线对齐,改为middle*/
注意:
- 一定要加
font-size: 0
才能完全垂直居中!!(原因见vertical-align和line-height的好基友关系~)
具体有关基线与line-height内容见下一篇!!!
<3> 单个块级元素
- 设置父元素的 line-height 与 height 为同一值
<4> 绝对定位
行内、块级元素均可!!!
<5> flex 布局
只需调整flex容器中,元素的对齐方式即可。功能强大!!