資訊專欄INFORMATION COLUMN
摘要：兩個小栗子講完了，你明白了么文章末尾，再送兩個小栗子當一個里沒有內容時高度為，當有內容比如文字時，就有了高度，難道是文字把撐開了其實不是，這個高度是由元素的決定的。代碼很簡單使用布局也可以實現居中紅色框上下居中文字在紅色框中居中
之前學習垂直居中的時候在網上找了很多方法，看的我眼花撩亂，一直想著整理一下思路，透過那些紛繁的招式看到本質。
首先明確一下概念：
left是指子元素的左margin距離父元素的左padding的距離
margin：auto是自適應的意思，由瀏覽器自動計算
translatex：關于x軸的坐標轉換，數值為百分數時是相對于本身的寬高。
理解了以上三點，就基本能看懂各種垂直居中方法了
1.top:0;bottom:0;left:0;right:0;margin:auto;這種方法的意思是先把子元素margin和父元素padding的距離置為0，可以理解為子元素和父元素之間沒有空隙，然后把margin置為auto，margin平分子元素和父元素之間的距離，也就是說子元素并不是真正意義的居中，只是子元素中間的內容居中了，子元素和父元素之間的距離是計算機自動計算的（平分）；注意這個方法需配合子元素position:absolute使用，因為默認情況下，margin：auto只對上下起作用，對左右不起作用，加上position使元素脫離標準流，margin：auto可識別
.father{
width:400px;
height:400px;
background-color:pink;
position:relative;
}
.son{
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
2.transform：translate()
這種方法適用于不知道父元素寬高的情況下（面試官可能會這樣問呢）。這種方法是通過先把元素定位到父元素的百分之五十的位置top:50%;left:50%;看下圖：
注意此時子元素的左上角在父元素中間，整個子元素處于父元素右下四分之一的左上角，然后通過transform：translate(-50%，-50%)，使子元素相對自身移動百分之五十，這樣子元素就居中啦。需要注意的是自元素中要寫定位position:relative;這樣才能根據父元素識別到定位的基點。
.father{
width:500px;
height:500px;
background-color:pink;
/*position:relative;*/
}
.son{
width:100px;
height:100px;
background-color: red;
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
兩個小栗子講完了，你明白了么？文章末尾，再送兩個小栗子(#^.^#)
3.line-height當一個div里沒有內容時高度為0，當有內容比如文字時，div就有了高度，難道是文字把div撐開了？其實不是，這個高度是由元素的line-height決定的。當把line-height設置為該div的高度時，div中的文字就居中顯示了。代碼很簡單
qqqqq
.line{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background:gray;
}
4、table
使用table布局也可以實現居中
qqqqqqqqqq
.father{
width:400px;
height:200px;
display:table-cell;
text-align:center;
vertical-align:middle; //紅色框上下居中
background-color:pink;
}
.son{
width:100px;
height:100px;
display:inline-block;
background-color:red;
line-height:100px; //文字在紅色框中居中
}
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113174.html
摘要：兩個小栗子講完了，你明白了么文章末尾，再送兩個小栗子當一個里沒有內容時高度為，當有內容比如文字時，就有了高度，難道是文字把撐開了其實不是，這個高度是由元素的決定的。代碼很簡單使用布局也可以實現居中紅色框上下居中文字在紅色框中居中 之前學習垂直居中的時候在網上找了很多方法，看的我眼花撩亂，一直想著整理一下思路，透過那些紛繁的招式看到本質。首先明確一下概念： left是指子元素的左mar...
摘要：兩個小栗子講完了，你明白了么文章末尾，再送兩個小栗子當一個里沒有內容時高度為，當有內容比如文字時，就有了高度，難道是文字把撐開了其實不是，這個高度是由元素的決定的。代碼很簡單使用布局也可以實現居中紅色框上下居中文字在紅色框中居中 之前學習垂直居中的時候在網上找了很多方法，看的我眼花撩亂，一直想著整理一下思路，透過那些紛繁的招式看到本質。首先明確一下概念： left是指子元素的左mar...
摘要：方法二利用，設置元素結構，并應用實現垂直居中，這種方法的實現可用于多行文本，要求及以上版本。 讓元素居中對齊是非常常見的需求，首先是水平居中，要實現水平居中行內元素只需要在其父元素上設置text-align: center即可，對于塊級元素來說讓它的margin-left: auto和margin-right: auto即可（width不可為auto），那么垂直居中呢？找下css屬性發...
閱讀 2376·2021-09-30 09:47
閱讀 1367·2021-09-28 09:35
閱讀 3237·2021-09-22 15:57
閱讀 2485·2021-09-22 14:59
閱讀 3634·2021-09-07 10:25
閱讀 3069·2021-09-03 10:48
閱讀 3035·2021-08-26 14:14
閱讀 933·2019-08-30 15:55
