常见水平居中和垂直居中方法

[axuebin]

总结一下常见的水平居中和垂直居中的方法。

---

水平居中

行内元素的居中

对于行内元素，居中简直不要太容易，父级元素中设置一个text-align:center即可。

定宽块级元素的居中1

对于块级元素，如果知道它的宽度，居中起来也会很容易，比如这样：

<div class="horizontal">
  <div class="demo demo-2">
    <div class="demo-2-item">我是块级元素</div>
  </div>
</div>

.demo-2-item{
  width:200px;
  height:30px;
  background-color: lightblue;
  margin: 0 auto;
}

也就是设置了宽度之后，另它的margin-left和margin-right为auto。

定宽块级元素的居中2

定宽块级元素还能这样：

<div class="horizontal">
  <div class="demo demo-5">
    <div class="demo-5-item">我是要居中的那个</div>
  </div>
</div>

.demo-5-item{
  position:absolute;
  width:200px;
  left:50%;
  margin-left:-100px;
  background-color: lightblue;
}

将它设为绝对定位，然后用left:50%将元素的最左侧移到绝对定位的正中间，再利用margin-left：-100px将它向左移动100px，也就是宽度的一半，就正好将元素的中线和容器的中线对齐了，实现居中效果。

定宽块级元素的居中3

还有一种利用绝对定位的方式：

<div class="horizontal">
  <div class="demo demo-6">
    <div class="demo-6-item">我是要居中的那个</div>
  </div>
</div>

.demo-5-item{
  position:absolute;
  width:200px;
  left:0;
  right:0;
  margin:0 auto;
  background-color: lightblue;
}

left:0;right:0的作用

我们先看left和right两个属性，在绝对定位中，如果设置了top: 0; left: 0; bottom: 0; right: 0 ，浏览器为它包裹一层新的盒子，这个元素会填满它相对父元素的内部空间。

假如我只设置了left:0;right:0;也就是这样：

蓝色区域会充满整个父容器的宽度。

width:200px的作用

如果给元素设置了宽度，浏览器会阻止元素填满所有的空间。也就是这样：

margin:0 auto的作用

根据盒子的计算规则，如果宽度是固定的，将margin-left和margin-right设为auto之后，这两个值会根绝父级元素的宽度自动计算除去元素的剩余宽度，然后均分，就实现了居中效果了。

flex

通过flex布局可以轻易实现居中，父级元素设置display: flex;justify-content: center;即可。

CSS3：transform

使用CSS3中新增的transform属性, 子元素设置：

position:absolute;
left:50%;
transform:translate(-50%,0);

grid

使用Grid来实现，父级元素设置:

display: grid;
grid-template-columns: 50px;
justify-content: center;

垂直居中

未完待续