css-----居中方式整理

前言

CSS中的居中可分为水平居中和垂直居中。水平居中分为行内元素居中和块状元素居中两种情况，而块状元素又分为定宽块状元素居中和不定宽块状元素居中。下面来详细介绍一下这几种方式的具体实现。

一、水平居中

1.行内元素居中

行内元素只针对行内元素，比如文本（text），图片（img），按钮（button）等行内元素，就可以通过给父元素设置text-align:center来实现。实现居中的方式如下：

<div class="div1">Hello world</div>

.div1 {
    width: 200px;
        height: 100px;
        text-align: center;   /* 让文本水平居中 */
        color: white;
        background-color: black;
}

tips: img元素事实上是行内（inline）元素，但是它为什么可以设置宽度和高度呢？其实是因为它除了是inline元素，同时也是replace元素，即替换元素（浏览器根据元素的标签和属性，来决定元素的具体显示内容）。所以从行为上看，img元素作为替换元素，有着类似于inline-block的行为。

2.块状元素居中

（1）定宽的块状元素居中

通过设置margin：0 auto 来实现居中。

<div class="div1">Hello world</div>

.div1 {
    width: 300px;
    border: 1px solid blue;
    margin: 0 auto;
}

（2）不定宽的块状元素居中

因为块状元素宽度不固定，所以实现与上面有些不同，其实现有三种方法：
方法一：使用display:table，然后设置margin:0 auto。

<div class="div1">Hello world</div>

.div1 {
    background: blue;
    display: table;
    margin: 0 auto;
}

方法二：将块级元素的display设为inline，然后设置设置text-align:center来实现。
这种方法不用添加无语义的标签，但是它变成行内元素，就无法设定长度值了。

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{
    text-align:center;
}
.container ul{
    display:inline;
}

方法三：给父元素设置 float（浮动），然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

<div class="wrap">
    <div class="wrap-center">Hello world</div>
</div>

.wrap{
    float:left;
    position:relative;
    clear: both;
    left:50%;
}
.wrap-center{
    position:relative;
    left:-50%;
}

---

二、垂直居中

1.父高度确定的单行文本（最常用）

此种情况设置垂直居中的方式是设置父元素的height（元素高度）和line-height（行高）的值一致来实现。

<div class="wrap">
    <h1>Hello world</h1>
</div>

.wrap h1 {
    color: white;
    height: 200px;
    line-height: 200px;
    background-color: black;
}

2.父高度确定的多行文本

其实现有多种方法：
方法一：设置块级元素的display为table-cell，就可以激活vertical-align并将其设为middle，但是这种方法兼容性比较差。

<div class="wrap">
    <p>Hello world</p>
    <p>Hello world</p>
    <p>Hello world</p>
</div>

.wrap{
    color: white;
    background:black;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}

方法二：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。

<table>
    <tbody>
        <tr>
            <td class="wrap">
                <div>
                    <p>Hello world</p>
                    <p>Hello world</p>
                    <p>Hello world</p>
                </div>
            </td>
        </tr>
    </tbody>
</table>

.wrap{
    height:300px;
    background:#ccc;
    vertical-align:middle;   /* td 标签默认情况下就默认设置了 vertical-align 为 middle，可以不需要显式地设置 */
}

方法三：使用绝对定位的 div，把它的 top 设置为 50％，margin-top 设置为负的 content 高度的一半。这意味着对象必须在 CSS 中指定固定的高度。

<div class="content"> Hello world</div> 

.content {
    position: absolute;
    top: 50%;
    height: 240px;
    margin-top: -120px; /* negative half of the height */
}

还有一些不太常用的方法没有列出来，有兴趣的可以再继续查阅其他资料。

---

总结：上面整理了css垂直居中方式和水平居中方式的实现方法，作为比较基础的css部分，要能够熟练掌握。