CSS中居中

参考文章：
https://juejin.im/post/5a7a9a545188257a892998ef
https://www.w3cplus.com/css/centering-css-complete-guide.html
https://segmentfault.com/a/1190000013966650?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader15
https://www.w3cplus.com/css/float-center.html
https://juejin.im/post/5c8f9e595188252db756920c
https://zhuanlan.zhihu.com/p/25068655
https://github.com/yanhaijing/vertical-center
https://juejin.im/entry/583b954b61ff4b006b55b43d

1.水平居中

01 行内元素 text-align:center

.parent {
   text-align: center;
}
span{
        border: 1px solid blue;
      }

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

02 块级元素 margin:auto

.child1{
  text-align: center;
  width: 100px;
  border: 1px solid blue;
  margin: auto;
}

<div class="parent1">
    <div class="child1">child</div>
</div>

03 多个块级元素

如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。这里有两个示例，其中一个使用了 inline-block 的显示方式，另一个使用了 flexbox 的显示方式：

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}

main div {
  background: black;
  color: white;
  padding: 15px;
  max-width: 125px;
  margin: 5px;
}

.inline-block-center {
  text-align: center;
}

.inline-block-center div {
  display: inline-block;
  text-align: left;
}

.flex-center {
  display: flex;
  justify-content: center;
}

<main class="inline-block-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

<main class="flex-center">
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
  </div>
  <div>
    I'm an element that is block-like with my siblings and we're centered in a row.
  </div>
</main>

总结：水平居中分三种情况，行内、块级、多个块级，分别解决方法是text-align：center、margin:auto、display`:inline-block或者flex布局 display:flex;justify-content: center;

2.垂直居中

参考文章：
https://juejin.im/entry/583b954b61ff4b006b55b43d
https://www.w3cplus.com/css/centering-css-complete-guide.html

第一种情况：单行+行内/具有行内元素性质的元素

01 行内元素（单行文字垂直居中）：设置line-height=height

.parent {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}

01 行内元素（单行文字垂直居中）：设置padding让上下内边距相等

body{
  background: #f06d06;
}

main {
  background: white;
  margin: 20px 0;
  padding: 50px;
}

main a{
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}

<main>
    <a href="#0">We're</a>
    <a href="#0">Centered</a>
    <a href="#0">Bits of</a>
    <a href="#0">Text</a>
  </main>

第二种情况：多行+行内/具有行内元素性质的元素

02 利用table/table-cell布局

首先要知道table中td默认情况下vertical-align: middle;,所以我们可以利用table/table-cell布局，实现多行垂直居中。

text-align是设置或检索对象中文本的左中右对齐方式。
vertical-align是用于指定元素的上下垂直对齐方式。

text-align和vertical-align更多可以参考：
https://www.jianshu.com/p/ba232268f573
https://www.cnblogs.com/keyi/p/5924563.html
https://blog.csdn.net/zhuobin_tian/article/details/70169664
https://blog.csdn.net/diudiu5201/article/details/54666809

*{
  margin: 0px;
  padding: 0px
}

body {
  background: #f06d06;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

02 利用flex布局

如果没法用类table方式，可能你需要用 flexbox：

.flex-center{
  display: flex;
  border: 1px solid #0000FF;
  height: 200px;
  width: 1600px;
  justify-content:center;
  align-items:center;
}

<div class="flex-center">
  <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>

请记住这个方法仅仅适用于父容器具有一个固定的额高度（px，%，等等），这也是为什么容器有一个高度。

02 幽灵元素（ghost element）/虚元素

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

如果上述方法都不起作用，那么你就需要使用被称为幽灵元素（ghost element）的非常规解决方式：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加 vertical-align: middle; 样式，即可实现垂直居中。

---

附注：

resize和overflow一起使用可以设置调整div元素的大小：

div
{
resize:both;
overflow:auto;
}

还可以参考：https://www.cnblogs.com/cpt666/p/6718643.html

---

body {
  background: #f06d06;
  font-size: 80%;
}

div {
  background: white;
  width: 240px;
  height: 200px;
  margin: 20px;
  color: white;
  resize: vertical;
  overflow: auto;
  padding: 20px;
}

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
  width: 190px;
  margin: 0;
  padding: 20px;
  background: black;
}

<div class="ghost-center">
  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
</div>

第三种情况：块级元素

03 知道元素的高度：绝对定位

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute; //
    left: 50%; //
    top: 50%; //
    margin-top: -20px; //
    margin-left: -40px; //
}

body {
  background: #f06d06;
  font-size: 80%;
}

main {
  background: white;
  height: 300px;
  margin: 20px;
  width: 300px;
  position: relative;
  resize: vertical;
  overflow: auto;
}

main div {
  position: absolute;
  top: 50%;      
  height: 100px;
  margin-top: -50px;
  background: black;
  color: white;
}

<main>

  <div>
     I'm a block-level element with a fixed height, centered vertically within my parent.
  </div>

</main>

03 块级元素 元素高度未知：绝对定位+transform

优点：不需要提前知道尺寸
缺点：兼容性不好

.parent {
    position: relative;
    height: 200px;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute; //
    left: 50%; //
    top: 50%; //
    transform: translate(-50%, -50%); //
    background: blue;
}

03 块级元素：绝对定位 + margin: auto

优点：不需要提前知道尺寸，兼容性好
缺点：这个方法是我最喜欢用的一个，要说缺点的话，我目前还不知道。

参考文章：https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-绝对定位-水平垂直居中/

.parent {
    position: relative;
    height: 200px;
    background: red;
}
.child {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

03 块级元素：padding

缺点：如果高度固定，需要提前计算尺寸（只在某些特定情况适用）。

.parent {
    padding: 5% 0;
}
.child {
    padding: 10% 0;
    background: blue;
}

03 块级元素：display: flex

缺点：兼容性不好

.parent {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;  /*水平居中*/
}
.child {
    background: blue;
}

03 块级元素：calc()

也是个不错的方法。
缺点：兼容性较差，需要计算。

.parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
.child {
    width: 100px;
    height: 100px;
    background: blue;
    padding: -webkit-calc((100% - 100px) / 2);
    padding: -moz-calc((100% - 100px) / 2);
    padding: -ms-calc((100% - 100px) / 2);
    padding: calc((100% - 100px) / 2);
    background-clip: content-box;
}

03 块级元素：inline-block

.parent {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
}
.child, .brother {
    display: inline-block;
    vertical-align: middle;
}
.child {
    background: blue;
    font-size: 12px;
}
.brother {
    height: 400px;
    font-size: 0;
}

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

其他 当然，还有一种方法，就是使用table布局: