CSS水平垂直居中

水平居中

水平居中这个问题首先要搞清楚存在两个条件才能够称之为水平居中，
即父元素必须是块级盒子容器，父元素宽度必须已经被设定好

以下讨论 参考这个结构

<div class="wrap">
   <div class="non-child">
      non-child
   </div>
</div>

Scene1 : 子元素是块级元素而且宽度没有设定

这种情况下不存在水平居中的说法，因为子元素是块级元素没有设定宽度，那么它会填充满整个父级元素的宽度。

.wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;

      }
        .non-child{
            border: 1px solid #000;
            background: green;

        }

Scene2 子元素是行内元素，子元素宽度是由其内容撑开的

.center{
    text-align:center;
}

Scene3 子元素是块级元素且宽度已经设定

第一种

.center{
    margin:0 auto;
}

第二种

 .padding{
            padding-left: 100px;
        }

结果同上，这里计算父元素padding-left或padding-right方法为：
（父元素宽度-子元素宽度）/2
其实跟第一种的原理是一样的。
设置margin-left也一样
不过这里注意的是，如果指定了box-sizing就要不同的考虑。

注意box-sizing

box-sizing:border-box
浏览器默认认为是content-box ：指定宽度和高度分别应用于元素的内容框。
在宽度和高度之外绘制元素的padding和border

border-box:指定高度和宽度确定元素边框box，对元素的宽度和高度的指定包括了border和padding的指定。

第三种
绝对定位

 .relative{

            position: relative;
        }
        .absolute{
            position: absolute;
            left:50%;
            margin-left:-50px;
        }

这里还要设定子元素margin-top为-50是需要消除父元素50%造成的偏移

垂直居中

前提

父元素是盒子容器，而且高度已经设定好。

Scene1

子元素是行内元素，高度是其内容撑开
这种情况需要设定父元素的line-height为其高度来使得子元素垂直居中

line-height是文本行基线之间的距离~

Scene2

子元素是块级元素但是子元素高度没有设定，在这种情况下实际上是不知道子元素的高度的，无法通过计算得到paddin或margin来调整。

**解法1 ：给父元素设定display:table-cell;
vertical-align:middle来解决**

 .child{
            display: table-cell;
            vertical-align: middle;
        }

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }

Scene3

子元素是块级元素且高度已经设定

解法一
计算子元素的margin-top或margin-bottom，计算方法为父(元素高度-子元素高度)/2
或者
计算子元素的padding-top或padding-bottom

 .wrap{
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
 .child{
            padding-top: 100px;
        }

解法二
利用绝对定位，

        .child{
            position: absolute;
            top:50%;
            margin-top: -50px;
        }
.wrap{
            position:relative;
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }

解法三
使用flexbox