本章将介绍父子元素宽高不定的CSS水平居中布局、垂直居中布局、垂直水平居中布局。学习如何写出布局不是内容关键，解决问题的方案是多种多样的。要了解到解决方案大致思路。
- 需要了解CSS里面很多属性的值，每个属性的特性是什么。一定要对这些特性非常了解和掌握。
- 对问题进行一些分解。比如说要求父元素宽度不定，子元素宽度也不定。第一步实现方案是实现内部元素宽度是由内容决定。第二步实现方案是实现水平居中。
一、CSS水平居中布局的几种方式
image.png
inline-block + text-aligntable + marginabsolute + transformflex + justify-content
1.1、inline-block + text-align实现水平居中布局
-
inline-block宽度由内容决定 -
text-align对inline inline-block元素起作用 - 优点: 兼容性好
- 缺点:
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实现水平居中布局
-
table宽度由内容决定 -
margin:0 auto对块级元素居中 - 优点: 兼容性好
<!-- table + margin -->
<div>
<div style="display:table;margin:0 auto;">DEMO</div>
</div>
1.3、absolute + transform实现水平居中布局
-
absolute宽度由内容决定 -
transform百分比参照物是自身元素 - 优点: 绝对定位脱离文档流， 子元素不会对其他元素产生影响
- 缺点: 兼容性差，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实现水平居中布局
- 父元素设置为
flex,子元素默认就是flex-item布局flex-item默认宽度是auto的 -
transform百分比参照物是自身元素 - 优点: 只需要设置父元素样式就可以
- 缺点: 兼容性差，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实现垂直居中布局
-
table-cell使父元素变成一个单元格 -
vertical-align作用在inline、inline-block、table-cell元素 - 优点: 兼容性好、子元素不需要设置额外样式
- 缺点: 父元素宽度由子元素的内容决定
<!-- table-cell + vertical-align -->
<div style="display: table-cell;vertical-align: middle;" class="parent">
<div class="child">DEMO</div>
</div>
2.2、absolute + transform实现垂直居中布局
- 当元素设置为
absolute时宽度由内容决定 -
transform百分比参照物是自身元素 - 优点: 绝对定位脱离文档流， 子元素不会对其他元素产生影响
- 缺点: 兼容性差，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实现垂直居中布局
- 父元素设置为
flex,子元素默认就是flex-item布局。flex-item默认高度默认值是stretch拉伸的。伸缩项目拉伸填充整个容器。（如果flex-item未设置高度或设为auto，将占满整个容器的高度。） -
align-item:center设置flex-item元素垂直居中，元素的高度就变成了由内容决定。 - 优点: 只需要设置父元素样式就可以
- 缺点: 兼容性差，css3的
flex属性高浏览器才支持
<!-- flex + align-items -->
<div style="display: flex;align-items: center;" class="parent">
<div class="child">DEMO</div>
</div>
三、CSS水平垂直居中布局的几种方式
通过对水平居中和垂直居中的解决方案，把它们结合在一起就可以实现水平垂直居中布局
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布局实现
<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布局实现
<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，个数未知，背景为黑色，间距为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>
