第 52 题：怎么让一个 div 水平垂直居中

[zeroone001]

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

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
/* 或者 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
/* 或 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}

[Feather130]

楼上总结的差不多了。再加一种

div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

[cleverboy32]

div.parent {
display: table;
}
div.child {
display: table-cell
vertical-align: middle;
text-align: center;
}

[hengliyin]

补充一个，使用 table-cell 的方式：

.parent {
        display: table-cell;
        height: 200px;
        width: 200px;
        background-color: orange;
        text-align: center;
        vertical-align: middle;
}
 .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
}

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

[Moriarty02]

水平垂直居中有好多种实现方式，主要就分为两类不定宽高和定宽高
以在body下插入一个div为例

1. 定宽高
   使用定位+margin

element.style {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -250px;
    margin-top: -250px;
    width: 500px;
    height: 500px;
    background: yellow;
    z-index: 1;
}

使用定位+transfrom

element.style {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    background: yellow;
    z-index: 1;
    transform: translate3d(-50%,-50%,0);
}

2. 不定宽高
   不定宽高的方法基本都适用于定宽高的情况
   这里把div的宽高按照内容展开
   使用定位+transform同样是适用的

element.style {
    position: absolute;
    left: 50%;
    top: 50%;
    background: yellow;
    z-index: 1;
    transform: translate3d(-50%,-50%,0);
}

还有一些其他的方法比如使用父容器使用flex，grid，table
这两个楼上也提到了，是可以实现的，但是在实际应用中，
因为改变了父容器的display，在多个子节点反而不好用了

[cb3570594]

楼上总结的差不多了。再加一种

div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

同理：
div.parent{ display:grid; } div.child{ margin:auto; }

[zeroone001]

div.parent {
display: table;
}
div.child {
display: table-cell
vertical-align: middle;
text-align: center;
}

需要再补充一个@cleverboy32

div.grandson {
    display:inline-block;
    width: 10px;
    height: 10px;
}

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

[sohoorc]

1. 
div.parent {
     display:flex;
      justify-content:center;
     align-items:center;
}

2.
div.parent {
    position:relative;
}

div.child{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

[hjskevin]

我总结的方法：https://juejin.im/post/5ca1a585f265da30dc7ac3f7

[yiqingfeng]

补充一个，使用 table-cell 的方式：

.parent {
        display: table-cell;
        height: 200px;
        width: 200px;
        background-color: orange;
        text-align: center;
        vertical-align: middle;
}
 .child {
        display: inline-block;
        width: 100px;
        height: 100px;
        background-color: blue;
}

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

table-cell 是不支持设置 width: 100%; 想让 .parent 和 其容器宽度一致最好设置一个 dispaly: table; 父容器。

<div class="parent-fix">
  <div class="parent">
    <div class="child">DEMO</div>
  </div>
</div>

.parent-fix {
  display: table;
  width: 100%;
}
.parent {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  height: 200px;
  background-color: #ccc;
}
.child {
  display: inline-block;
  background-color: #000;
  line-height: 50px;
  color: #fff;
}

[cleverboy32]

@zeroone001 在 parent 有宽高的时候， child 已经垂直居中了

[zeroone001]

@zeroone001 在 parent 有宽高的时候， child 已经垂直居中了

不行
display: table-cell; 这个居中不了，必须要第三个元素在child里面

[XinChou16]

100%高度的 after 加上 inline-block

<div class="box">
    <div class="center">
</div>

.box {
  width: 500px;
  height: 500px;
  text-align: center; /*center*/
}
.box::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.center {
  display: inline-block;
  width: 100px;
  height: 100px;
  vertical-align: middle;/*center*/
}

[Caitingwei]

// 1. line-height + text-algin
.parent {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.child {
}

// 2. text-align + vertail-align
.parent {
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

// 3. table-cell + vertail-align
.parent {
  display: table-cell;
  vertical-align: middle;
}
.child {
}

// 4. position + margin
.parent {
  position: relative;
}
.child {
  width: 100px;
  height: 100px;
  position: absolute;
  left: calc(50% - 50px);
  top: calc(50% - 50px);
}

// 5.position + transform 
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 6. flex
.parent {
  display: flex;
}
.child {
  align-items: center;
  justify-content: center;
}

[huijingL]

楼上大神们指出的很全了，

我指出一点：
使用 margin-left 和 margin-top, 相对的是父元素，
transform： translate 相对的自身，
这是他们的一点区别，实际上我是想问一下，他们还有没有其他的区别 ，望后续大神指出；

前端小白，有错勿怪，感谢指正