在平时编写网页的过程中，元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种：水平居中、垂直居中、水平垂直居中。
对于块级元素的水平居中，我们常常借助marin: 0 auto;来实现；对于行内块元素，我们常常借助text-align: center;来实现。简单说来，元素的水平居中并不困难。
在平时编写网页的过程中，元素居中应该是网页布局中非常常见的一种CSS效果。对于元素居中常见的有这三种：水平居中、垂直居中、水平垂直居中。
对于块级元素的水平居中，我们常常借助marin: 0 auto;来实现；对于行内块元素，我们常常借助text-align: center;来实现。简单说来，元素的水平居中并不困难。
元素的垂直居中应该是相对较难的一种。在垂直居中中，我们最常见的一个需求就是文字垂直居中。对于文字垂直居中，我们通常都是将行高和元素的高保持一致来实现文字垂直居中。但是这种方法有一个致命的缺陷，就是元素高度需要提前知道。同时，这种方法也有一个弊端，就是当元素的高度发生改变时，需要我们手动去修改行高。虽然这种情况不常出现，但是确不够灵活。
可能正是由于这个原因，所以在CSS3中新增了flex布局。相比较于行高的方式，flex最大的优点就是我们不需要提前知道元素的高度，这也就保证了元素的高度在发生变化后不需要进行二次修改。
通常我们都是给元素设置如下样式：display: flex; align-items: center; height: inherit;来达到元素的垂直居中。
在水平居中、垂直居中、水平垂直居中这三种常见的居中方式中，以水平垂直居中最难。
如果让一个已知宽高的元素(如：宽、高各200px)水平垂直居中，常见的方式如下：
方法一：要居中元素的父级添加相对定位，要居中元素设置绝对定位，然后将left和top值设置为50%，最后通过margin-left负宽度的一半，margin-top负高度的一半即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 50%;
- top: 50%;
- width: 200px;
- height: 200px;
- margin: -100px 0 0 -100px;
- }
方法二：要居中元素的父级添加相对定位，要居中元素设置绝对定位，然后将left、top、right、bottom设置为0，最后设置margin: auto;即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 0;
- top: 0;
- rightright: 0;
- bottombottom: 0;
- width: 200px;
- height: 200px;
- margin: auto;
- }
对于一个未知宽高元素水平垂直居中，这个难度系数就相当高了。不过在CSS3出现后，这些都变成了“小儿科”。
方法一：要居中元素的父级盒模型设置为flex，并且有明确高度。
- E {
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100%;
- }
方法二：要居中元素的父级添加相对定位，要居中元素设置绝对定位，然后将left和top值设置为50%，最后设置transform: translate3d(-50%, -50%, 0);即可。
- E {
- position: relative;
- }
- E F {
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate3d(-50%, -50%, 0);
- }
就个人习惯而言，在不考虑低版本浏览器的情况下，建议使用最后一种方法做元素的水平垂直居中，这样能省去很多不必要的麻烦。
