css水平垂直居中在实际中的应用

[songhlc]

前端面试过程中经常都会问一个问题：一个元素如何实现水平垂直居中？

这里我们抛开技术层面的实现，直接从实际业务角度，通过不同的场景来回答这个问题，毕竟任何技术都是为了业务服务的，有了具体业务，也方便我们更好的去实践。

• 场景1:文章的标题需要水平居中
• 场景2:table中文字垂直居中
• 场景3:弹出模态框需要水平垂直居中
• 场景4:图标＋文字，文字要和图标对齐

直接看代码，所有demo地址

场景1

<article>
    <p class="title"><span>我是title</span></p>
    <p class="content">我是文章的内容，我通常来说会有多段去显示</p>
</article>

<style>
.demo1 .title{
    text-align: center;
}
</style>

场景2

<table>
        <thead>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>个人描述</th>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>我通常来说会超过一行所能显示的内容</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>18</td>
            <td>男</td>
            <td>我通常来</td>
        </tr>
        </tbody>
    </table>
<style>
table td{
    border:solid 1px #eee;
    vertical-align: middle;
    text-align: center;
}
</style>

当然多数浏览器下table默认是会垂直居中的，这里只是为了引入下面对table-cell的使用

<div class="demo-cell">
    <div class="table-like">
        <div class="table-cell-like">
            姓名
        </div>
        <div class="table-cell-like">
            年龄
        </div>
        <div class="table-cell-like">
            性别
        </div>
        <div class="table-cell-like">
            描述
        </div>
    </div>
    <div class="table-like">
        <div class="table-cell-like">
张三
        </div>
        <div class="table-cell-like">
18
        </div>
        <div class="table-cell-like">
男
        </div>
        <div class="table-cell-like">
我要超过两行了哦我要超过两行了哦我要超过两行了哦
        </div>
    </div>
</div>
<style>
.table-like{
    display: table;
    width: 400px;
}
.table-cell-like{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
</style>

利用display:table 就能像表格一样使用vertical-align来实现垂直居中了

ps:table-cell只是可以用来做这个，但并不是最适合用做垂直居中的

场景3

弹出的模态框一般来说都是通过绝对定位来做，即：postion:absolute/fixed，所以基本可以用下面的方法实现。

<div class="demo3">
    <div class="modal-ab">
        假设我是一个弹出的模态框 <br>如果当弹出框高度和宽度是固定值的时候,<br>可以使用     <br>margin-left:-弹框width%;<br>
        margin-top:-弹框height%; <br>来支持ie8.
    </div>
</div>
<style>
.demo3{
    position: relative;
    width: 500px;
    height: 300px;
    border:solid 1px #eee;
}
.demo3 .modal-ab{
    position: absolute;
    top:50%;
    left:50%;
    width: 200px;
    height: 120px;
    border:solid 1px #000000;
    text-align: left;
    padding:10px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

这种方式启示算是一种通用方式，利用定位来做垂直水平居中（IE9+），当然，在IE8中如果已知元素高宽是可以用margin负值的方式去实现的，如下：

.demo3 .modal-ab{
    position: absolute;
    top:50%;
    left:50%;
    width: 200px;
    height: 120px;
    margin-left: -100px;
    margin-top:-60px;
}

场景4

图标和文字对齐（不使用position:relative）

<h2>图标大 文字小</h2>
<div class="demo4">
    <span class="fa fa-edit big" ></span><span class="small">我是文字</span>
</div>
<h2>图标小 文字大</h2>
<div class="demo4">
    <span class="fa fa-edit small"></span><span class="big">我是文字</span>
</div>
<style>
.demo4 .big{
    vertical-align: middle;
}
</style>

场景4中，因为inline-block默认的vertical-align是baseline，所以会产生底部和文字底部对齐的现象，所以需要设置成middle来保证垂直居中。启示以前我都是一直用postion:relative的方式来处理这个问题。

[songhlc]

补充，移动端请好好去学习flex布局吧