页面的水平居中布局

水平居中布局是指当前元素在父级容器中，水平方向居中显示。实现水平居中布局的方式多种多样。以下是三种常用的解决方案。根据这三种方案可以衍生出多种方案。
第一种方案：
父元素设置text-align属性为center
子元素设置display属性为inline-block
如：

#f{
                background-color: red;
                height: 200px;
                width: 400px;
                text-align: center;
            }//父元素属性
/*text-align为文本内容设置对齐方式（left，right，center）*/
            #c{
                height: 100px;
                width: 100px;
                background-color: yellow;
                display: inline-block;
            }//设置子元素属性
/*display属性的值block（块级元素）,inline(内联元素)，inline-block（行内块级元素）*/
<div id="f">
            <div id="c"></div>
            </div>

这种方案的兼容性比较好，但是text-align属性具有继承性，会导致子级元素的文本也居中显示。（解决办法是设置第一子级元素的text-align属性）

第二种解决方案：
设置子级元素的displays属性为table或者block，margin属性为0 auto。
例如：

#f{
                background-color: red;
                height: 200px;
                width: 400px;
            }
            #c{
                height: 100px;
                width: 100px;
                background-color: yellow;
                display:block;
                margin: 0 auto;
            }
<div id="f">
            <div id="c"></div>
            </div>

这种方案只需要设置子级元素即可，但是如果子级元素脱离文档流（如设置display属性或者设置定位的值为absolute或者fixed会使元素脱离文档流），则会使margin的值失效。
第三种解决方案：
给父级元素设置相对定位（relative）
给子级元素设置绝对定位，同时设置left为50%，transform的值为translateX(-50%)。
例如：

#f{
                background-color: red;
                height: 200px;
                width: 400px;
                position:relative;//开启腹肌元素的定位，当然,在此例中还可以设置为absolute或fixed等
            }
/*把子级元素设置为相对定位，若父级元素未设置定位，则子级元素的定位相对于页面，故须开启父级元素的定位
            #c{
                height: 100px;
                width: 100px;
                background-color: yellow;
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
<div id="f">
            <div id="c"></div>
            </div>

这种方案父级元素难以影响子级元素居中效果，但由于transform属性是css3中新增的属性，兼容性较差。