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%)
    }