CSS居中布局

此文共讲述三种水平居中的方法

方法一：
父元素设置文本居中（text-align：center）
子元素设置为块级元素（inline-block）

实现代码如下：

*{    margin: 0;    padding: 0;    }    body{        text-align: center;    }    .wrap{        display: inline-block;        width: 200px;        height: 200px;        background-color: #cccccc;    }

方法二：
利用margin：0 auto;

实现代码如下：

*{        margin: 0;        padding: 0;    }    .wrap{        margin:0 auto;        width: 200px;        height: 200px;        background-color: #cccccc;    }

方法三：
利用css3的属性
父元素设置为相对定位（relative）
子元素先设置为绝对定位，先向左移动50%，然后在向右拉回该元素宽的50%（即：left：50%；transform：translateX（-50%））

代码如下：

 *{        margin: 0;        padding: 0;    }    body{        position: relative;    }    .wrap{        width: 200px;        height: 200px;        background-color: #cccccc;        position: absolute;        left: 50%;        transform:translateX(-50%)    }