css水平垂直居中在实际中的应用 #21
Description
前端面试过程中经常都会问一个问题：一个元素如何实现水平垂直居中？
这里我们抛开技术层面的实现，直接从实际业务角度，通过不同的场景来回答这个问题，毕竟任何技术都是为了业务服务的，有了具体业务，也方便我们更好的去实践。
- 场景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的方式来处理这个问题。