一矛物、普通元素三種垂直水平居中
如圖：
image.png
<div class="main"> //html結(jié)構(gòu)
<div class="content"></div>
</div>
.main{ //main的樣式
width: 100px;
height: 100px;
background-color: #ff7f50;
display: flex;
align-items: center;
justify-content: center;
}
- absolute小技巧</b>
.content1{
width: 100px;
height: 100px;
background-color: #20b2aa;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
原理：利用絕對定位元素的盒模型特性茫死，在偏移屬性為確定值的基礎(chǔ)上，設(shè)置margin:auto履羞。
- translate()函數(shù)
.content2{
width: 100px;
height: 100px;
background-color: #20b2aa;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
原理：利用絕對定位元素的偏移屬性和translate()函數(shù)的自身偏移達(dá)到水平垂直居中的效果[注意]IE9-瀏覽器不支持峦萎。
- 使用flex
.main{
width: 100px;
height: 100px;
background-color: #ff7f50;
display: flex;
align-items: center;
justify-content: center;
}
原理：在伸縮容器上使用主軸對齊justify-content和側(cè)軸對齊align-items。
二忆首、文字居中垂直水平居中
image.png
<div class="middle-box"> //html結(jié)構(gòu)
<div class="middle-inner">
<p>good good study,</p>
<p>day day up!</p>
</div>
</div>
-
1 單行文字垂直居中
text-align: center; line-height = height; -
2 多行文字垂直水平居中
-
第一種display:table的方法
.middle-box { display: table; height: 200px; width: 200px; background-color: #20B2AA; } .middle-inner { display: table-cell; vertical-align: middle; text-align: center; } 缺點(diǎn)就是不兼容ie6爱榔、ie7.怎么兼容呢？ 兩者寫法： 1糙及、條件語句寫法 <!--[if lt IE 8]> <style> .middle-inner { position: absolute; top:50%;} .middle-inner p {position: relative; top: -50%} </style> <![endif]--> 2详幽、ie hack寫法 .middle-box { display: table; height: 300px; border: 1px solid #ff0000; width: 400px; margin: 0 auto; position: relative; } .middle-inner { display: table-cell; vertical-align: middle; *position: absolute; *top: 50%; *left: 50%; width: 100%; text-align: center; } .middle-inner p { position: relative; *top: -50%; *left: -50%; }
-
