字體垂直居中設置教程「html字體垂直居中怎麼設置」

1. 元素高度聲明的情況下在父容器中居中：絕對居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
優點：
1.跨瀏覽器，包括 IE8-10
2.無需其他冗餘標記，CSS 代碼量少
3.完美支持圖片居中
4.寬度高度可變，可用百分比
缺點：
1.必須聲明高度

2. 負外邊距：當元素寬度高度為固定值時。設置 margin-top/margin-left 為寬度高度一 半的相反數，top:50%;left:50%

<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
優點：
良好的跨瀏覽器特性，兼容 IE6-7
代碼量少
缺點：
不能自適應，不支持百分比尺寸和 min-/max-屬性設置
內容可能溢出容器
邊距大小域與 padding，box-sizing 有關

3. CSS3 Transform 居中：

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%， -50%);
 -moz-transform: translate(-50%， -50%);
 transform: translate(-50%, -50%);
}
優點：
內容高度可變
代碼量少
缺點：
IE8 不支持
屬性需要瀏覽器廠商前綴
可能干擾其他 transform 效果

4. table-cell 居中：

<div class="center-container is-table">
 <div class="table-cell">
 <div class="center-block"></div>
 </div>
</div>
.center-container.is-table {
 display: table;
}
.is-table .table-cell {
 display: table-cell;
 vertical-align: middle;
}
.is-table .center-block {
 width: 50%;
 margin: 0 auto;
}
優點：
高度可變
內容溢出會將父元素撐開
跨瀏覽器兼容性好
缺點：
需要額外 html 標記