居中
水平居中
1. 寬度不為100%的塊級(jí)元素居中
margin: 0 auto
加在要居中元素自身上
001.png
HTML
<div class="container">
<div class="block-box">
寬度不為100%的塊級(jí)元素水平居中
</div>
</div>
CSS
.container {
height: 100%;
background: rgba(255, 126, 0, 1.0);
padding: 50px;
}
.block-box {
border: 2px solid #FFF;
width: 300px;
height: 200px;
margin: 0 auto;
}
2.inline inline-block元素,文字居中
text-align:center
加在要居中元素的父級(jí)元素上
inline元素水平居中
002.png
HTML
<div class="inline-box">
<span class="span-box">
inline元素水平居中
</span>
</div>
CSS
.inline-box {
border: 2px solid #0079CC;
height: 200px;
margin: 30px 0;
padding: 20px;
text-align: center;
}
.span-box {
border: 2px solid #FFF;
}
inline-block元素水平居中
003.png
HTML
<div class="inline-block-box">
<div class="div-box">
inline-block元素水平居中
</div>
</div>
CSS
.inline-block-box {
border: 2px solid #0079CC;
height: 200px;
margin: 30px 0;
padding: 20px;
text-align: center;
}
.div-box{
display: inline-block;
border: 2px solid #FFF;
}
文字水平居中
004.png
HTML
<div class="single-text-box">
單行文字水平居中
</div>
<div class="more-text-box">
多行文字水平居中蒿讥，多行文字水平居中，多行文字水平居中抛腕，多行文字水平居中芋绸，多行文字水平居中，多行文字水平居中担敌，多行文字水平居中摔敛，多行文字水平居中，多行文字水平居中全封，多行文字水平居中马昙，多行文字水平居中，多行文字水平居中刹悴，多行文字水平居中行楞，多行文字水平居中，多行文字水平居中土匀，多行文字水平居中子房，多行文字水平居中，多行文字水平居中
</div>
CSS
.single-text-box{
border: 2px solid #0079CC;
height: 200px;
margin: 30px 0;
padding: 20px;
text-align: center;
}
.more-text-box {
border: 2px solid #0079CC;
height: 200px;
margin: 30px 0;
padding: 20px;
text-align: center;
}
垂直居中
1. 上下pdding一樣（容器的高度有內(nèi)容撐開(kāi)）就轧，適合多行文本居中
- 添加在居中元素的父級(jí)元素上
005.png
HTML
<div class="padding-box">
<h3 class="padding-text">padding垂直居中</h3>
<h3 class="padding-text">padding垂直居中</h3>
<h3 class="padding-text">padding垂直居中</h3>
</div>
CSS
.padding-box {
border: 2px solid #0079CC;
margin: 30px 0;
padding: 50px 0;
}
.padding-text {
margin: 0;
}
008.png
HTML
<div class="padding-text-box">
多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中,多行文字垂直居中
</div>
CSS
.padding-text-box {
border: 2px solid #0079CC;
margin:30px 0;
padding: 50px;
}
2.line-height 單行文字垂直居中(不適合多行文本)
設(shè)置元素line-height = height
006.png
007.png
HTML
<div class="line-height-box">
單行文字垂直居中
</div>
<div class="line-height-box">
多行文字垂直居中失敗证杭，多行文字垂直居中失敗，多行文字垂直居中失敗妒御，多行文字垂直居中失敗解愤，多行文字垂直居中失敗，多行文字垂直居中失敗乎莉，多行文字垂直居中失敗琢歇，多行文字垂直居中失敗，多行文字垂直居中失敗
</div>
CSS
.line-height-box {
border: 2px solid #0079CC;
margin: 30px 0;
height: 100px;
line-height: 100px;
}
3. display:table-cell;vertical-align:middle垂直居中（IE8+）
(display: table-cell時(shí)margin會(huì)失效)
- 元素添加display:table-cell;vertical-align:middle
009.png
HTML
<div class="table-cell-box">
<div class="table-cell-text">
table-cell垂直居中,table-cell垂直居中,table-cell垂直居中,table-cell垂直居中,table-cell垂直居中
</div>
</div>
CSS
.table-cell-box {
margin: 30px 0;
}
.table-cell-text {
border: 2px solid #0079CC;
height: 200px;
display: table-cell;
vertical-align: middle;
}
寬高不定的圖片居中
010.png
HTML
<div class="table-cell-img-box">
<div class="table-cell-img">
</div>
<div class="table-cell-img">
</div>
<div class="table-cell-img">
</div>
<div class="table-cell-img">
</div>
<div class="table-cell-img">
</div>
</div>
CSS
.table-cell-img {
border: 2px solid #0079CC;
height: 300px;
padding: 10px;
display: table-cell;
vertical-align: middle;
}
.table-cell-img img {
border: 2px solid #FFF;
}
4.vertical-align:middle垂直居中(display:inline-block,inline,table-cell元素有效)
011.png
HTML
<div class="vertical-align-box">
<p class="vertical-align-text">
vertical-align文字圖片垂直居中
</p>
</div>
CSS
.vertical-align-box{
border: 2px solid #0079CC;
margin: 30px 0;
padding: 10px;
}
.vertical-align-img {
border: 2px solid #FFF;
margin: 0 20px;
vertical-align: middle;
}
.vertical-align-text {
display: inline-block;
vertical-align: middle;
}
水平垂直居中
1.絕對(duì)定位
transform（要求IE10+以上）
兼容性
到Can I use... Support tables for HTML5, CSS3, etc查看
017.png
012.png
HTML
<div class="absolute-box">
<div class="transform-img-text">
<p>absoulute水平垂直居中</p>
</div>
</div>
CSS
.absolute-box{
border: 2px solid #0079CC;
margin: 30px 0;
height: 500px;
position: relative;
}
.absolute-box img {
border: 2px solid #A572F1;
}
.transform-img-text {
border: 2px solid #FFF;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
text-align: center;
}
負(fù)margin
013.png
HTML
<div class="absolute-box">
<div class="margin-img-text">
<p>absoulute水平垂直居中</p>
</div>
</div>
CSS
.absolute-box{
border: 2px solid #0079CC;
margin: 30px 0;
height: 500px;
position: relative;
}
.absolute-box img {
border: 2px solid #A572F1;
}
.margin-img-text {
border: 2px solid #FFF;
width: 300px;
height: 300px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -170px;
text-align: center;
}
2.padding + text-align/margin
text-align
014.png
HTML
<div class="padding-center-box">
<div class="padding-center-img-text">
<p>padding+text-align水平垂直居中</p>
</div>
</div>
```
### CSS
.padding-center-box{
border: 2px solid #0079CC;
margin: 30px 0;
padding: 50px;
text-align: center;
}
.padding-center-img-text img {
border: 2px solid #A572F1;
}
.padding-center-img-text {
border: 2px solid #FFF;
padding: 20px;
display: inline-block;
}
### margin
### HTML
<div class="padding-auto-box">
<div class="padding-auto-img-text">
<p>padding+margin水平垂直居中</p>
</div>
</div>
### CSS
.padding-auto-box{
border: 2px solid #0079CC;
margin: 30px 0;
padding: 50px;
}
.padding-auto-img-text img {
border: 2px solid #A572F1;
display: inline-block;
width: 100%;
}
.padding-auto-img-text {
border: 2px solid #FFF;
padding: 20px;
width: 50%;
text-align: center;
margin: 0 auto;
}
### 3.flex
### 兼容性
到[Can I use... Support tables for HTML5, CSS3, etc]([http://caniuse.com/](http://caniuse.com/))查看
### HTML
<div class="flex-box">
<div class="flex-img-text">
<p>flex水平垂直居中</p>
</div>
</div>
### CSS
.flex-box{
border: 2px solid #0079CC;
margin: 30px 0;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.flex-img-text img{
border: 2px solid #A572F1;
}
.flex-img-text {
border: 2px solid #FFF;
padding: 20px;
height: 300px;
text-align: center;
}
**文章著作權(quán)歸劉德銓所有梦鉴，轉(zhuǎn)載須說(shuō)明來(lái)源**