CSS - 水平居中

1、使用inline-block+text-align

• 兼容ie6
• child里的文字也会水平居中，
• 子元素之间有间隙

// html
<div class="parent" >
    <div class="child">子</div>
    <div class="child">子</div>
</div>

// css
.parent{
    text-align:center;
    background: #eee;
}
.child{
    width: 100px;
    display:inline-block;
    background: #ddd;
}

// 解决间隙问题
.parent{
    text-align:center;
    background: #eee;
    font-size: 0;          // 兼容chrome
    letter-spacing: -4px;  // 兼容safari
    word-spacing: -4px;
}
}
.child{
    width: 100px;
    display:inline-block;
    background: #ddd;
    font-size: 16px;
    letter-spacing: normal;
    word-spacing: normal;
    display: inline-block;
}

2、使用absolute + margin

• 兼容ie6
• 子元素会重叠

// html
<div class="parent" >
    <div class="child">子</div>
    <div class="child">子</div>
</div>
// css
.parent{
   background: #eee;
   position: relative;
}
.child {
    width: 100px;
    background: #ddd;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

3、使用table + margin

• 不兼容ie6
• 子元素会独占一行

// html
<div class="parent" >
    <div class="child">子</div>
    <div class="child">子</div>
</div>
// css
.parent{
   background: #eee;
}
.child {
    width: 100px;
    display:table;
    margin: 0 auto;
    background: #ddd;
}

4、使用absolute + transform

• 不兼容ie6，高版本浏览器需要添加一些前缀
• 子元素会独占一行

// html
<div class="parent" >
    <div class="child">子</div>
    <div class="child">子</div>
</div>
// css
.parent{
   background: #eee;
}
.child {
    width: 100px;
    background: #ddd;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}

5、使用flex+justify-content

• 不兼容ie6
• 子元素会独占一行

// html
<div class="parent" >
    <div class="child">子</div>
    <div class="child">子</div>
</div>
// css
.parent{
   background: #eee;
}
.child {
    width: 100px;
    background: #ddd;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
}