css水平垂直居中

再次总结一下css水平垂直居中问题

在css中，进行水平居中非常简单：

• 若是行内元素，就对其父元素设置text-align： center；
• 若是块级元素，自身设置margin：auto；即可。

垂直居中比较复杂。

下面详细叙述几种常见的比较好的用法，对于过去的比较老的用法不再总结。

绝对定位的方法

其基本原理是把元素的正中心放到视口的正中心。
看下面的例子：

main {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -3em;
   margin-left: -9em;
   width: 18em;
   height: 6em;
}

这个例子主要是先通过绝对定位将元素左上角移动到视口的正中心位置，然后再通过负边距将其向上向左移动，使中心位置与视口对齐。

该方法还有一种方式，使代码形式更简单：

main {
   position: absolute;
   top: calc(50% - 3em);
   left: calc(50% - 9em);
   width: 18em;
   height: 6em;
}

通过calc函数直接计算出需要移动的值。明白了上一个的方式，这个应该很容易理解了。

这种方法很简单，但是有个很大的缺点，即我们必须知道该元素的宽高。若是元素宽高不确定的话没办法使用。

下面看一下可以弥补其不足的方法：

main {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

关键在最后一句，其原理与上面叙述的相同。使用css3的变形属性，将元素左上角移动到视口中心后，再移动元素自身的一半即可。注意：这里的50%指的是元素自身宽高的50%；而上面定位的50%指的是视口宽高的一半。并且写的时候要注意transform的兼容性。

使用绝对定位的三种方法已经叙述完了。方法一个比一个灵活。但是仍然有缺点。

• 绝对定位对布局的影响很大，有时候我们并不能使用绝对定位布局
• 若需要居中的元素高度超过视口的高度，顶部会被裁减掉，若要解决，该问题会变得复杂。。。

基于视口单位

该方法实现的原理与绝对定位的原理相同。即将元素的中心位置与容器中心对齐。主要有两步：其一，将元素左上角移动到元素正中心；其二，移动自身宽高的一半，达到最终效果。第二步上面已经有解决方案，通过translate解决。

这里重点说第一步。
先说一个我原来一直理解有误的知识点（但很重要！！！）。

main{
   width: 18em;
   padding: 1em 1.5em;
   margin: 50% auto 0;
   transform: translateY(-50%);
}

看这个例子，margin左右值auto，水平方向肯定是居中了。但垂直方向通过margin 50%并没有垂直居中。这是因为margin虽然是相对于父元素计算的百分比，但是它的值是以父元素的宽度为基准计算的。这也是为什么利用auto只能水平居中不能垂直居中的原因。但是这种情况是在writing-mode: horizontal-tb; 和 direction: ltr; 的情况下。当书写模式变成纵向的时候，其参照将会变成包含块的高度。更详细的可看这篇文章：margin系列之百分比

想要元素相对于视口居中，可以使用视口单位。关于视口单位的详细描述可以参考这篇文章：视区相关单位vw, vh..简介以及可实际应用场景

在这里我们只需要知道1vw表示视口宽度的1%，1vh表示视口高度的1%。

由此我们可以这样写：

main{
   width: 18em;
   padding: 1em 1.5em;
   margin: 50vh auto 0;
   transform: translateY(-50%);
}

如此就可以实现水平垂直居中。但是它只适用于在视口居中的场景。

Flex布局

flex布局进行垂直居中非常简单。

body{
   display: flex;
   min-height: 100vh;
   margin: 0;
}

main{
   margin: auto
}

若子元素是文本元素，也可以实现居中。示例如下：

main{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 18em;
   height: 10em;
}

该布局的缺点是兼容性不是很好，但以后相信可以越来越好。