HTML中元素居中方法
之前我們就總結過很多劇中的方法,但是時間長不用,就會慢慢遺忘,所以我們從頭來複習一次,變想邊敲程式碼……
文字居中
height + line-height:兩者配合使用,垂直方向居中
text-align:父級的text-align,水平方向居中
注意:text-align:center ;只是將子元素裡的內聯元素居中
如果不是內聯元素就要用到 margin: 0 auto;
寫個簡單的程式碼來理解
<style>
.word{
width: 100px;
height: 30px;
background: #E5E5E5;
text-align : center;
line-height: 30px;
font-size: 14px;
}
</style>
<div class="word">
<p>優秀</p>
</div>
優秀這兩個字在div中妥妥居中。
水平居中
水平居中分兩種情況
one:定寬塊元素水平居中
定寬 + 塊元素
來看看具體的程式碼
.wrap{width:200px;
height:200px;
border:1px solid red;
margin:0 auto;} //寬度必須給值
<div class="wrap"></div>
two:不定寬塊元素水平居中
1.改變為行內元素,然後使用text-align:center處理,多用於不定項導航的ul的居中
.nav{text-align:center;}
.nav ul{display:inline;}
<div class="nav">
<ul>
<li>1111111</li>
<li>2222222</li>
</ul>
</div>
2.父元素浮動left:50%;
同時要設定position:relative(給子元素相對定位一個參考)
子元素相對定位position:relative;left:-50%;
.wrap{position:relative;
left:50%;
float:left;}
.box{position:relative;
left:-50%;}
<div class="wrap">
<div class="box">一個子級盒子</div>
<div>
垂直居中
垂直居中也分兩種情況
one:塊級元素垂直居中,子元素知道具體寬高
設定top:50%,這個塊元素的最上邊為垂直居中的位置,但是這樣整體的內容並不是垂直居中,所以要設定margin-top: -2/父寬 px; //為高度的一半
這樣這個塊元素又相對於自身最上面向上又移動了自身的50%,因此就垂直居中了。
.wrap {
//父元素
}
.wrap .content {
position: absolute;
width: 100px;
heigth: 100px;
top: 50%;
margin-top: -50px; //為高度的一半
}
* two:子元素不知道具體寬高 *
這種情況有三種方法
第一種藉助table佈局;
第二種是藉助translate的transform屬性:
.wrap {
position: relative;
}
.wrap .content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
第三種就是用flex佈局,非常的簡單,程式碼如下:
.wrap{
display: flex;
flex-direction: column;
justify-content: center;
}
萬能居中方法
首先移動子元素高度(寬度)的一半:left:50%;(top:50%;)
再移動父元素高度(寬度)的一半:margin-left:-寬/2;(margin-top:-高/2;)
前提是必須要知道子元素的寬高
.wrap{
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: hotpink;
position: absolute;
left:50%;
margin-left: -50px;
}
<div class="wrap">
<div class="box">一個子級盒子</div>
</div>
絕對居中
子元素必須比父元素小,子元素寬高也必須要知道
.wrap{
width: 200px;
height: 200px;
background-color: lightskyblue;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: hotpink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
overflow: auto;
}
<div class="wrap">
<div class="box"></div>
</div>
可能總結的也不太齊全,會慢慢補全。