CSS中的布局详解（四）：居中

居中一直是css里比较关键的一个概念，在多数情况下居中往往有许多种方法。

水平居中

行内元素居中： text-align：center;
块级元素居中：

• margin：0 auto； //这种方法前提必须是要为元素设置宽度，否则宽度拉伸为父级的宽度，无法实现居中效果。
• 利用绝对定位的“子绝父相”法，给父元素设置相对定位，子元素设置绝对定位和transform：

.container {
  position:relative;
}
.item {
  position:absolute;
  left:50%;
  transform:translate(-50%);
}

• 利用flex实现居中:
  这里列举一种常见的方式，具体请参考上篇文章： CSS中的布局详解（三）

.container {
    display:flex;
    justify-content:center;
}

垂直居中

行内元素垂直居中：

• 单行行内或文本元素，可以设置等值的padding的top值和bottom值：

padding-top:10px;
padding-bottom:10px;

• 还有最常用的，让行高line-height和height值相等：

height:50px;
line-height:50px;

• vertical-align属性，但这个属性需要设置一个类似table-cell的父级容器：

display: table-cell;
vertical-align: middle;

块级元素：

• 在已知元素高度的情况下，可以利用定位来实现居中：

.container {
    position:relative;
}
.item {
    position: absolute;
    top: 50%;
    height:100px;
    margin-top: -50px;
}

• 在未知元素高度的情况下，首先需要定位到容器的中心，然后再使用transform和translate属性：

.container {
    position:relative;
}
.item {
    position: absolute;
    top:50%;
    transform: translateY(-50%);
}

• 利用flex实现垂直居中：

.container {
    display:flex;
    flex-direction: column;
    justify-content: center;  
    align-items: center; //加上这条属性，就是水平和垂直居中
}

参考资料：

• CSS居中
• CSS居中完整指南

我的个人博客：http://chronosblog.top
我的微信公众号：runtustory

CSS布局详解系列索引：

• CSS中的布局详解（一）：视觉格式化模型
• CSS中的布局详解（二）：浮动与定位
• CSS中的布局详解（三）：flex布局