CSS实现元素水平垂直居中

水平垂直居中是页面布局中及其常见的样式，关于实现方式也是多种多样，闲话少说，咱们直接进去正题。

首先作一下基础布局：

<div class="outer">
    <div class="inner"></div>
</div>复制代码

这里咱们给出了两个div,而后咱们来给这两个div写一下初始样式：

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
}复制代码

如今咱们能看到这两个div是这样显示的：

好了，前戏到此为止，下面是重头戏了。

方法一：采用绝对定位，计算定位距离

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50px;   /*（父元素高度-子元素高度）/2*/
    left:50px;  /*（父元素宽度-子元素宽度）/2*/
}复制代码

哦啦，就是如此的简单，咱们来看看效果：

这种方法要根据父子元素的宽高来计算top和left的值，若是页面布局复杂起来，每个都这样计算岂不是要烦死我这样的数学白痴？我的以为这种方法有点太粗暴了。

方法二：采用绝对定位，巧妙使用margin:auto

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:0px;
    bottom: 0px;
    left:0px;
    right:0px;
    margin:auto;
}复制代码

好啦，来看效果

也能够实现，彻底no problem! 只须要父元素相对定位，子元素绝对定位，而后设置top，bottom，left，right都为0，再设置margin:auto（这时浏览器会给margin-left,margin-right相同的值，margin-top,margin-bottom相同的值，使元素块在父元素中水平垂直居中）便可。

注意：利用margin:auto方法支持跨浏览器，支持百分比，可是必须声明子元素的width或height(至少一项，否则会占据父元素全部空间)。

方法三：采用绝对定位，利用负边距

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:absolute;
    top:50%;
    left: 50%;
    margin-top:-50px;  /* 子元素高度的一半 */
    margin-left:-50px; /* 子元素宽度的一半 */
}复制代码

看，居中了：

这种方法也很容易理解的，来咱们简单说一哈，当咱们设置了left和top各为50%时，子元素左边界距父元素左边界50%,上边界距父元素上边界50%，其实此时，咱们能够知道，子元素的左上角这个点，是水平垂直居中的，当咱们设了负边距时，咱们能够理解为这个子元素向右向上各移了自身长度的一半，这就达到了水平垂直居中。

注意：利用负边距方法优势是具备良好的跨浏览器特性，兼容IE6/IE7，可是缺点是不能自适应，需设置子元素的宽高，不支持百分比，且负边距值与padding和是否认义box-sizing: border-box有关，计算须要根据不一样状况。

方法四：transform用起来

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    position:relative;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    position:relative;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}复制代码

来，直接上图：

这种方法和上一种方法的原理差很少，只是把上面的margin换成了transform，这种处理方式的好处在于咱们不须要知道子元素的宽高，直接用-50%就完事儿了。

注意：利用transform方法的好处是代码量少，且你不用设置子元素的width与height,内容可由子元素里的子元素任意撑开，优雅地溢出。但transform IE8不支持。

方法五：flex布局

.outer{
    height:200px;
    width:200px;
    border:1px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner{
    height: 100px;
    width:100px;
    border:1px solid #000;
    
}复制代码

看效果：

Flex布局即为弹性布局，只需将父元素设置三个属性便可(display,justify-content,align-items)。

注意：利用flex方法代码量少，不用设置子元素的width与height,内容可由子元素里的子元素任意撑开，优雅地溢出。但flex IE8/IE9不支持。

总结：

方法介绍完了，问题讲清楚了，废话我就很少说了哦，完结撒花~~~