本章將介紹父子元素寬高不定的CSS水平居中布局饥侵、垂直居中布局鸵赫、垂直水平居中布局。學習如何寫出布局不是內(nèi)容關鍵躏升，解決問題的方案是多種多樣的辩棒。要了解到解決方案大致思路。
- 需要了解CSS里面很多屬性的值膨疏，每個屬性的特性是什么一睁。一定要對這些特性非常了解和掌握。
- 對問題進行一些分解佃却。比如說要求父元素寬度不定者吁，子元素寬度也不定。第一步實現(xiàn)方案是實現(xiàn)內(nèi)部元素寬度是由內(nèi)容決定饲帅。第二步實現(xiàn)方案是實現(xiàn)水平居中复凳。
一、CSS水平居中布局的幾種方式
image.png
inline-block + text-aligntable + marginabsolute + transformflex + justify-content
1.1灶泵、inline-block + text-align實現(xiàn)水平居中布局
-
inline-block寬度由內(nèi)容決定 -
text-align對inline inline-block元素起作用 - 優(yōu)點: 兼容性好
- 缺點:
text-align會被所有子元素繼承育八，所以child里面的文字也會水平居中，需要進行額外處理
<!-- inline-block + text-align -->
<div style="text-align:center;" class="parent">
<div style="display:inline-block;text-align: left;" class="child">DEMO</div>
</div>
1.2赦邻、table + margin實現(xiàn)水平居中布局
-
table寬度由內(nèi)容決定 -
margin:0 auto對塊級元素居中 - 優(yōu)點: 兼容性好
<!-- table + margin -->
<div>
<div style="display:table;margin:0 auto;">DEMO</div>
</div>
1.3髓棋、absolute + transform實現(xiàn)水平居中布局
-
absolute寬度由內(nèi)容決定 -
transform百分比參照物是自身元素 - 優(yōu)點: 絕對定位脫離文檔流， 子元素不會對其他元素產(chǎn)生影響
- 缺點: 兼容性差惶洲，css3新增transform屬性高瀏覽器才支持
<!--absolute + transform -->
<div style="position:relative;">
<div style="position: absolute;left:50%;transform: translateX(-50%)">DEMO</div>
</div>
1.4按声、flex + justify-content實現(xiàn)水平居中布局
- 父元素設置為
flex,子元素默認就是flex-item布局flex-item默認寬度是auto的 -
transform百分比參照物是自身元素 - 優(yōu)點: 只需要設置父元素樣式就可以
- 缺點: 兼容性差，css3新增transform屬性高瀏覽器才支持
<!-- flex + justify-content -->
<div style="display: flex;justify-content: center;">
<div>DEMO</div>
</div>
二湃鹊、CSS垂直居中布局的幾種方式
image.png
table-cell + vertical-alignabsolute + transformflex + align-items
2.1儒喊、table-cell + vertical-align實現(xiàn)垂直居中布局
-
table-cell使父元素變成一個單元格 -
vertical-align作用在inline镣奋、inline-block币呵、table-cell元素 - 優(yōu)點: 兼容性好、子元素不需要設置額外樣式
- 缺點: 父元素寬度由子元素的內(nèi)容決定
<!-- table-cell + vertical-align -->
<div style="display: table-cell;vertical-align: middle;" class="parent">
<div class="child">DEMO</div>
</div>
2.2、absolute + transform實現(xiàn)垂直居中布局
- 當元素設置為
absolute時寬度由內(nèi)容決定 -
transform百分比參照物是自身元素 - 優(yōu)點: 絕對定位脫離文檔流余赢， 子元素不會對其他元素產(chǎn)生影響
- 缺點: 兼容性差芯义，css3新增
transform屬性高瀏覽器才支持
<!-- absolute + transform -->
<div style="position: relative;" class="parent">
<div style="position: absolute;top:50%; transform: translateY(-50%);" class="child">DEMO</div>
</div>
2.3、flex + align-items實現(xiàn)垂直居中布局
- 父元素設置為
flex,子元素默認就是flex-item布局妻柒。flex-item默認高度默認值是stretch拉伸的扛拨。伸縮項目拉伸填充整個容器。（如果flex-item未設置高度或設為auto举塔，將占滿整個容器的高度绑警。） -
align-item:center設置flex-item元素垂直居中，元素的高度就變成了由內(nèi)容決定央渣。 - 優(yōu)點: 只需要設置父元素樣式就可以
- 缺點: 兼容性差计盒，css3的
flex屬性高瀏覽器才支持
<!-- flex + align-items -->
<div style="display: flex;align-items: center;" class="parent">
<div class="child">DEMO</div>
</div>
三、CSS水平垂直居中布局的幾種方式
通過對水平居中和垂直居中的解決方案芽丹，把它們結合在一起就可以實現(xiàn)水平垂直居中布局
image.png
inline-block + text-align + table-cell + vertical-alignabsolute + transformflex + justify-content + align-items
<!-- inline-block + text-align + table-cell + vertical-align -->
<div style="text-align:center;display: table-cell;vertical-align: middle;" class="parent">
<div style="display:inline-block;" class="child">DEMO</div>
</div>
<!-- absolute + transform -->
<div style="position: relative;" class="parent">
<div style="position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);" class="child">DEMO</div>
</div>
<!-- flex + justify-content + align-items -->
<div style="display: flex;align-items: center; justify-content: center;" class="parent">
<div class="child">DEMO</div>
</div>
四北启、小案例
4.1、水平列表的底部對齊
一個水平排列的列表拔第，每項高度都未知咕村，底部對齊。
image.png
-
flex布局實現(xiàn)
<style>
.parent > div {
width: 60px;
}
</style>
<div class="parent" style="display:flex;align-items: baseline;">
<div style="background:red;height:160px;"></div>
<div style="background:#006599;height:80px;"></div>
<div style="background:#009999;height:60px;"></div>
<div style="background:#009900;height:100px;"></div>
</div>
-
inline-block布局實現(xiàn)
<style>
.parent > div {
width: 60px;
font-size: 0;
}
</style>
<div class="parent" style="font-size:0;margin-top: 22px;">
<div style="display: inline-block;background:red;height:160px;"></div>
<div style="display: inline-block;background:#006599;height:80px;"></div>
<div style="display: inline-block;background:#009999;height:60px;"></div>
<div style="display: inline-block;background:#009900;height:100px;"></div>
</div>
4.2蚊俺、幻燈布局
幻燈（slide）寬高未知懈涛，指示器（pointer）在底部且水平居中，距離底部10px泳猬，指示器中的圓直徑為10px肩钠，個數(shù)未知，背景為黑色暂殖，間距為5px价匠。
image.png
<style>
* {
padding: 0;
margin: 0;
}
.slide {
height: 380px;
position: relative;
background: #9DC4E6;
}
.slide .pointer {
position: absolute;
text-align: center;
left: 0;
right: 0;
bottom: 10px;
/* transform: translateX(-50%); */
}
.slide .pointer i {
display: inline-block;
background: #000;
width: 10px;
height: 10px;
border-radius: 50%;
}
.slide .pointer i + i {
margin-left: 5px;
}
</style>
<div class="slide">
<div class="pointer"><i></i><i></i><i></i><i></i></div>
</div>
