CSS水平居中布局、垂直居中布局、垂直水平居中布局

本章将介绍父子元素宽高不定的CSS水平居中布局、垂直居中布局、垂直水平居中布局。学习如何写出布局不是内容关键，解决问题的方案是多种多样的。要了解到解决方案大致思路。

1. 需要了解CSS里面很多属性的值，每个属性的特性是什么。一定要对这些特性非常了解和掌握。
2. 对问题进行一些分解。比如说要求父元素宽度不定，子元素宽度也不定。第一步实现方案是实现内部元素宽度是由内容决定。第二步实现方案是实现水平居中。

一、CSS水平居中布局的几种方式

image.png

1. inline-block + text-align
2. table + margin
3. absolute + transform
4. flex + 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

1. table-cell + vertical-align
2. absolute + transform
3. flex + 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

1. inline-block + text-align + table-cell + vertical-align
2. absolute + transform
3. flex + 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>

五、参考链接

• https://mooc.study.163.com/learn/1000054001?tid=1000181006&trace_c_p_k2=5a438633a2c94ca5948927f04e46b125#/learn/content?type=detail&id=1000330038&cid=1000317073
• https://yanhaijing.com/css/2018/01/17/horizontal-vertical-center/