一直相信好記性不如爛筆頭，最近遇到很多用到垂直居中的，整理一下以便日后查閱。
一、文本垂直水平居中
1、水平居中：
文字水平居中沒什么好說的，用text-align: center;即可很容易的實現。
2、垂直居中：
1）簡單的單行文本
利用line-height==height,使得單行文本垂直居中。
1 <p> 2 垂直水平居中 3 </p>
1 p{
2 width: 200px;
3 height: 200px
4 text-align: center;
5 line-height: 200px;
6 background:#1AFF00;7 }簡單點來說，用p標簽就可以，就像這樣
<p>垂直水平居中</p>
1 p{
2 width: 200px;
3 height: 200px;
4 text-align: center;
5 line-height: 200px;
6 background:#00ABFF;7
}效果如下：
2）多行文本
利用表格元素的特性，塊級父元素display: table;內聯元素display: table-cell;vertical-align: middle;
（內聯）
1 <p 2 <span>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</span> 3 </p>
1 p{
2 width: 200px;
3 height: 200px;
4 display: table;
5 background:#1AFF00;
6 }
7 span{
8 display: table-cell;
9 vertical-align: middle;10 }（塊級）
1 <p> 2 <p>國際《兒童權利公約》界定的兒童系指18歲以下的任何人</p> 3 </p>
定位+transform: translateY(-50%);
1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background: #00ABFF;
6 }
7 p{
8 position: absolute;
9 top: 50%;
10 left: 0;
11 width: 200px;
12 height: 64px;
13 transform: translateY(-50%);14 }定位+margin負值
1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background:#1AFF00;
6 }
7 p{
8 position: absolute;
9 top: 50%;
10 left: 0;
11 width: 200px;
12 height: 64px;
13 margin-top: -32px;
14 }定位+margin: auto;
1 p{
2 position: relative;
3 width: 200px;
4 height: 200px;
5 background:#00ABFF;
6 }
7 p{
8 position: absolute;
9 top: 0;
10 left: 0;
11 right: 0;
12 bottom: 0;
13 margin: auto;
14 width: 200px;
15 height: 64px;
16 }兩者都是定寬定高，父元素用padding值，此值為父元素高度減去子元素高度的一半
1 p{
2 width: 200px;
3 height: 64px;
4 padding: 68px 0;
5 background:#1AFF00;
6 }
7 p{
8 width: 200px;
9 height: 64px;
10 }兩者都是定寬定高，父元素用overflow: hidden;（css hack）子元素用margin值，此值為父元素高度減去子元素高度的一半
p{
width: 200px;
height: 200px;
overflow: hidden;
background:#00ABFF;
}
p{
width: 200px;
height: 64px;
margin:68px auto;
}效果如下：
二、圖片垂直水平居中
1、水平居中
1）img在css初始設置中是inline-block，行內塊元素，此時若是要水平居中用text-align:center;
2）給img元素設置display:block;轉換為塊級元素，要想水平居中用margin:0 auto;
2、垂直居中
1.jpg
用這張圖片做示范
1 <p> 2 <img alt="" src="1.jpg" /> 3 </p>
line-height==height vertical-align: middle;
p{
width: 198px;
height: 198px;
text-align: center;
line-height: 198px;
border: 1px solid #8900FF;
}
img{
vertical-align: middle;
}display: table-cell;vertical-align: middle;
p{
display: table-cell;
vertical-align: middle;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
display: block;
margin: 0 auto;
}display: table-cell;vertical-align: middle; text-align: center;
p{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}定位+display: block;transform: translate(-50%,-50%);
p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: block;
}定位+margin負值
p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 50%;
left: 50%;
margin: -75px 0 0 -75px;
}定位+margin: auto;
p{
position: relative;
width: 198px;
height: 198px;
border: 1px solid #8900FF;
}
img{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: block;
}overflow: hidden;margin值
p{
width: 198px;
height: 198px;
overflow: hidden;
border: 1px solid #8900FF;
}
img{ 8 margin: 25px;
}padding值
p{
2 padding: 25px;
3 width: 148px;
4 height: 148px;
5 border: 1px solid #8900FF;
6 }用table的屬性+vertical-align: middle;實現
1 <p>2 <span><img alt="" src="1.jpg" /></span>3 </p>
p{
display: table;
width: 198px;
height: 198px;
text-align: center;
border: 1px solid #8900FF;
}
span{
display:table-cell;
vertical-align: middle;
}用background實現
1 <p></p>
1 p{
2 width: 198px;
3 height: 198px;
4 border: 1px dashed #8900FF;
5 background: url(1.jpg) no-repeat center center;
6 }效果如下：
原文來自：http://www.cnblogs.com/Ni-F/p/6937931.html 感謝作者分享！
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2023 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
