資訊專欄INFORMATION COLUMN
摘要：這個實現(xiàn)的技巧在于，我們給目標元素的四個方位都設置了相對父元素為的距離，但是沒有最后一行就像四個方向都有一個同樣大小的力在拉扯著你，這時候產(chǎn)生的效果是呆在原地不動這時候是左邊的效果。
寫在前面的話：
1: 為了方便起見，接下來我都會把想要居中的元素，不管是一行text，還是一個div，都叫做‘目標元素’， 把包含這個目標元素的叫做‘父元素’。（額。。。。這兩個名字如此不對稱，我也是醉了。）
2: 我會給一個元素設置一個同名的class和id，class用了寫一些實際上跟居中沒有關(guān)系的css，只是為了好看；id呢用來寫跟居中有關(guān)的css，免得混淆了。
Case 1: 最簡單的單行的行內(nèi)元素（inline element）
HTML Code:
aaaaa
CSS Code:
.child {
height: 100px;
width: 100px;
background-color: #F7F00E;
}
#child {
line-height: 100px;
text-align: center;
}
垂直居中：只需要給父元素（＃child）設置‘等值’的height和line-height.
水平居中：當然就是text-align: center 就行了
Case 2: 一個div在另一個div里面居中
HTML code:
Apple
CSS code:
#child {
line-height: 100px;
text-align: center;
}
case 2和case 1一樣，對于垂直居中來說，只需要設置等值的line-height和height就可以了。達到的效果是：
------->
Case 3: 多個div元素在父div元素中垂直水平居中
HTML code:
AppleOrange
CSS code:
#child {
line-height: 100px;
text-align: center;
}
這時候，我們往＃child里面添加了一個div元素，如果我們保持我們之前的＃child的css代碼不變，這時候呈現(xiàn)的效果是：
因為我們給父元素＃child設置了100px的line-height,而line-height是可以繼承的，所以它里面的每一個div元素都通過繼承擁有了100px的line-height。這個時候還想依賴于line-height來實現(xiàn)垂直居中，顯然就不行了。對于這種情況，有多種解決方案：
1: table-cell ＋vertical-align
HTML code:
AppleOrange
CSS code:
#child {
display: table-cell;
vertical-align: middle;
text-align: center;
}
呈現(xiàn)的效果：
2: position relative + absolute ＋ margin
HTML code:
AppleOrange
CSS code:
.parent {
height: 90px;
width: 90px;
border: 1px solid black;
}
.child {
height: 60px;
width: 60px;
background-color: #F7F00E;
}
#parent {
position: relative;
}
#child {
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -30px;//修正中心點
}
先來看看效果的演進。從第一個圖到第二個圖是我們添加了＃parend和＃child里面的css的效果，但是這時候不包括＃child里面的最后一句 margin: -30px 0 0 -30px;。因為我們設置了top和left分別相對父元素間隔50%的距離，但是這個位移是以子元素也就是＃child的左上角為原點的，所以如果我們想要達到子元素（＃child）和父元素（＃parent）的中心重合的話，還得再次向左和向上分別移動寬度和高度的一半的距離，也就是＃child里面最后一句代碼做的事情。那30px，其實就是＃child一半的寬度和高度。
----> ---->
3: position relative + absolute + margin auto
HTML code:
AppleOrange
CSS code:
.parent {
height: 90px;
width: 90px;
border: 1px solid black;
}
.child {
height: 60px;
width: 60px;
background-color: #F7F00E;
}
#parent {
position: relative;
}
#child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
這個實現(xiàn)的技巧在于，我們給目標元素＃child的四個方位都設置了相對父元素為0的距離，但是沒有最后一行 margin: auto;就像四個方向都有一個同樣大小的力在拉扯著你，這時候產(chǎn)生的效果是呆在原地不動,這時候是左邊的效果。但是，當我們添加了最后一行代碼：margin: auto;我們的目標元素就會跑到父元素的正中間。margin: 0 auto; 常常被我們用來設置水平位置的居中，所以當我們給它四個方向都設置auto的時候，它就只能在父元素的正中間了。
--->
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86387.html
摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...
摘要：但是部分瀏覽器存在兼容性的問題。核心代碼寬高不固定水平垂直居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示使用布局垂直水平居中核心代碼使用布局垂直水平居中演示 CSS居中完全指南——構(gòu)建CSS居中決策樹 showImg(https://segmentfault.com/img/bV8tDq); 本文總結(jié)CSS居中,包括水平居中和垂直居中.本文相當于CSS決策樹,下次再遇到...
摘要：原文鏈接水平居中若是行內(nèi)元素給其父元素設置即可實現(xiàn)行內(nèi)元素水平居中若是塊級元素該元素設置即可若子元素包含屬性為了讓子元素水平居中則可讓父元素寬度設置為并且配合作如下設置是中給屬性新加的一個屬性值它配合可以輕松實現(xiàn)水平居中 原文鏈接 水平居中 1) 若是行內(nèi)元素, 給其父元素設置 text-align:center,即可實現(xiàn)行內(nèi)元素水平居中.2) 若是塊級元素, 該元素設置 margin...
摘要：前言居中布局，是前端頁面最常見的一種布局需求。下面將現(xiàn)今自己了解的居中布局方法作個小總結(jié)。水平居中行內(nèi)元素在包含的父元素定義屬性為。垂直水平居中對于這個問題，可以綜合上述點進行實現(xiàn)。 前言 居中布局，是前端頁面最常見的一種布局需求。剛開始學習前端時還是困擾了一段時間，后來看了Centering in CSS: A Complete Guide一文后才算掌握了方法。下面將現(xiàn)今自己了解的居...
摘要：二內(nèi)邊距法另一種方法和行高法很相似，它同樣適合一行或幾行文字垂直居中，原理就是利用將內(nèi)容垂直居中，比如這段代碼的效果和法差不多。 一、行高（line-height）法 如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hi...
閱讀 3860·2023-04-25 17:45
閱讀 3504·2021-09-04 16:40
閱讀 1062·2019-08-30 13:54
閱讀 2198·2019-08-29 12:59
閱讀 1466·2019-08-26 12:11
閱讀 3349·2019-08-23 15:17
閱讀 1574·2019-08-23 12:07
閱讀 3945·2019-08-22 18:00
