CSS(7) 水平/垂直居中实现

60 阅读1分钟

一. 水平居中

<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*/

注意:

具体有关基线与line-height内容见下一篇!!!

<3> 单个块级元素
  • 设置父元素的 line-height 与 height 为同一值
<4> 绝对定位

行内、块级元素均可!!!

<5> flex 布局

只需调整flex容器中,元素的对齐方式即可。功能强大!!