CSS 水平垂直居中

[PolluxLee]

# flexbox + justify-content + align-items

• 父元素和子元素都可不定宽高，也不用考虑子元素是块级元素或者行内元素，在兼容 flexbox 的情况下，我认为是最好的方案
• 适用于：父子元素不定宽高、子元素是块级元素或行内元素

<style>
  .parent {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    border: 2px solid black;
  }
  .child {
    width: 100px;
    height: 100px;
    background: green;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>

# absolute + transform

• 如果不兼容 transform，就只能用 margin 去控制自身偏移，但子元素需要定宽高
• 适用于：父子元素不定宽高、子元素是块级元素或行内元素

<style>
  .parent {
    position: relative;
    width: 200px;
    min-height: 200px;
    border: 2px solid black;
  }
  .child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: green;
    color: white;
  }
</style>

<div class="parent">
  <span class="child">行内元素</span>
</div>

# 伪元素 + vertical-align + text-align

• 设置 text-align: center 和 vertical-align: middle 对 inline-block 水平垂直居中
• 因为伪元素设置了 height: 100% 所以需要父元素定高
• 为了解决 inline-block 之间的空隙，设置了 word-spacing: -5px
• 适用于：父元素定高、子元素为行内或行内块，可不定宽高

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    word-spacing: -5px;
    text-align: center;
  }
  .parent::before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
    
  }
  .child {
    display: inline-block;
    vertical-align: middle;
    background: green;
    color: white;
  }
</style>

<div class="parent">
  <div class="child">你好</div>
</div>

# line-height + text-align

• 父元素需要定高
• 适用于：父元素定高、子元素为行内元素

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    text-align: center;
  }
  .child {
    background: green;
    color: white;
    line-height: 200px;
  }
</style>

<div class="parent">
  <span class="child">哈哈</span>
</div>

# table + vertical-align + text-align

• 利用 table 对内容进行居中
• 适用于：多行文本的水平垂直居中

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    display: table;
  }
  .child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
</style>

<div class="parent">
  <div class="child">你好</div>
</div>

# grid + margin

• grid 布局的一个小技巧
• 适用于：兼容 grid 的浏览器

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    display: grid;
  }
  .child {
    background: green;
    color: white;
    margin: auto;
  }
</style>

<div class="parent">
  <span class="child">哈哈</span>
</div>

# 其他

1. 块级元素的水平居中 margin: 0 auto
适用于：子元素为定宽的块级元素

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
  }
  .child {
    background: green;
    color: white;
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
</style>

<div class="parent">
  <div class="child"></div>
</div>

2. 行内元素的水平居中 text-align: center
适用于：子元素为行内元素

<style>
  .parent {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    text-align: center;
  }
  .child {
    background: green;
    color: white;
  }
</style>

<div class="parent">
  <span class="child">哈哈</span>
</div>

# 参考

https://css-tricks.com/centering-css-complete-guide/

https://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/