css居中解决方案及思考

这段时间在做百度前端技术学院的任务，自己总结了许多细节方面的改进和体会，css中主要分为两部分：一是如何利用css进行布局，具体内容请看我上一篇博客《css布局总结》；二就是如何解决css居中布局。

简单来说，css布局有以下三个方案：
（一）text-align和vertical-align
对父元素设置text-align: center或vertical-align: middle，只对子元素为内联元素时才起作用。text-align: center水平居中，这条语句很好理解，也经常用到，如实现段落居中；vertical-align: middle垂直居中就存在很多坑了，有时候想用这条语句实现简单的垂直居中，就是实现不了emoticon。那是为什么呢？我们都知道display有三种不同的属性：inline、inline-block和block，就好像物质的三种状态：液态、固液混合和固态，只有一个元素属于inline、inline-block或block时其自身的vertical-align属性才起作用。不建议使用这个属性，因为搞不好就会发狂，但是在做图片垂直居中的时候还是蛮喜欢它的，哈哈！

<a href="" class="header__nav__link">
    <img src="./images/login-icon.png" alt="" class="header__icon">
    登录
a>

.header__icon{
    vertical-align: text-bottom;
}

（二）万能的position
利用position属性可实现水平居中和垂直居中，精髓在于transform: translate()，具体案例如下：

<div class="container">
    <div class="container__left">div>
    <div class="container__right">div>
div>

.container{
    position: absolute;
    width: 400px;
    height: 200px;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.container{
    position: absolute;
    width: 400px;
    height: 200px;
    top:0;
    bottom: 0;
    left: 0;
    right:0;
    margin:  auto;
}

在父元素上设置position: relative属性，若不设置则以根目录为参照物，这里把.container设置为position: absolute;就是将body作为参照物，方案一在子元素上设置 position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%)，top和left是以参照物的宽高作百分比，transform: translate()中的百分比则以自身宽高为参照物。方案二应用的非常巧妙，简单直接，不过需要注意的是需要设置height，否则margin：auto；无效，若不设置height，程序不会给出预设值，因为区域高度是随内容高度变化的，所以margin：auto 0不会自动平分margin-top和margin-bottom。

（三）神奇的flex
利用flex做居中问题是山重水复疑无路的一种办法，flex很优雅，也很绅士，就像是看到柳暗花明一样。
只需要在父元素上设置display: flex;justify-content: center;align-items: center;即可实现水平垂直居中，是不是简单又暴力emoticon，但是其兼容性不好，所以在前面几个方案无法实现的前提下再考虑用它。