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

Question

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

zeroone001 opened this issue 6 years ago · 26 comments

<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;
}

Answer 1 · 2019-04-11T00:01:30.000Z

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

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

Answer 2 · 2019-04-11T01:47:48.000Z

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

Answer 3 · 2019-04-11T01:48:51.000Z

补充一个，使用 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>

Answer 4 · 2019-04-11T01:50:15.000Z

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

定宽高
使用定位+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);
}

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

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

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

Answer 5 · 2019-04-11T01:59:32.000Z

楼上总结的差不多了。再加一种
div.parent{
  display:flex;
}
div.child{
  margin:auto;
}

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

Answer 6 · 2019-04-11T05:55:35.000Z

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>

Answer 7 · 2019-04-11T06:43:10.000Z

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%);
}

Answer 8 · 2019-04-11T11:17:31.000Z

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

Answer 9 · 2019-04-11T12:45:32.000Z

补充一个，使用 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;
}

Answer 10 · 2019-04-12T15:26:18.000Z

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

Answer 11 · 2019-04-13T06:42:40.000Z

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

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

Answer 12 · 2019-04-15T14:19:48.000Z

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*/
}

Answer 13 · 2019-04-20T07:17:48.000Z

// 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;
}

Answer 14 · 2019-04-21T07:48:27.000Z

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

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

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

Answer 15 · 2019-07-30T05:40:03.000Z

// 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;
}

方法2 只能水平居中，方法3导致div.parent宽度和div.parent宽度一样，且设置width样式无效

Answer 16 · 2019-09-02T12:59:20.000Z

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

这个设置table-cell 的盒子会占满父盒子，里面的文字才能居中。

Answer 17 · 2019-09-07T16:00:34.000Z

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;
}

能说一下这种实现方式的原理吗

Answer 18 · 2019-10-08T07:25:27.000Z

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;
}

能说一下这种实现方式的原理吗

这个我前几天刚在张鑫旭的《CSS世界》里面第一次看到，原理就是（基于我个人的理解）：设置inline-block和vertical-align:middle后，里面的元素会基于中间的文字准线居中对齐（学生时代的英语本子里面写字母，都是4条线形成三个空白区域，文字的对齐就是根据这几条线的）vertical-align更多信息可以看看张鑫旭博文；
然后，由于伪类是position:static(默认）的，那么伪类撑开了父元素的基准线（高度是100%），使得此时文字的基准线就是整个div.parent的中心了，另外vertical-align只影响inline或者inline-block的，所以div.child设置vertical-align就能居中了。
以上是我个人的理解，有很多表达不清楚的地方，更详细的内容还是推荐张鑫旭的博文。

Answer 19 · 2019-11-12T11:37:56.000Z

可以用calc来计算，这样代码少一点

 .parent {
  border: 1px solid;
  width: 1000px;
  height: 1000px;
  }
.child {
  position: relative;
  border: 1px solid;
  width: 100px;
  height: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  }

Answer 20 · 2020-02-27T07:18:46.000Z

<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;
}

提个建议，可以在每一种实现上写一下**和场景

Answer 21 · 2020-03-25T17:09:53.000Z

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

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

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

margin是给自己加个外边框，是相对自身原来的位置来变化吧

Answer 22 · 2020-04-19T10:24:22.000Z

学无止境~
div.parent {
position: relative;
}

div.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}

Answer 23 · 2021-01-20T06:40:49.000Z

div.parent{
   display:grid;
   place-items: center;
}

Answer 24 · 2021-03-23T08:58:30.000Z

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;
}

能说一下这种实现方式的原理吗

在73题的IFC中有人提到了IFC的应用场景：垂直居中项应该就是这种方式的实现原理

Answer 25 · 2021-07-25T09:11:31.000Z

1、使用绝对定位

       <div
          style={{
            position: "absolute",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            backgroundColor: "seagreen"
          }}
        >
          居中元素
        </div>

2、不使用绝对定位，使用flex

      <div
        style={{
          display: "flex",
          width: 300,
          height: 300,
          margin: "20px auto",
          border: "2px solid #333"
        }}
      >
        <div
          style={{
            width: 40,
            height: 40,
            margin: "auto",
            backgroundColor: "seagreen"
          }}
        >
          居中元素
        </div>
      </div>

3、使用table-cell，display为table-cell同时使用verticalAlign: middle会让元素垂直居中

      <div
        style={{
          display: "table-cell",
          verticalAlign: "middle",
          width: 300,
          height: 300,
          margin: "20px auto",
          border: "2px solid #333"
        }}
      >
        <div
          style={{
            width: 40,
            height: 60,
            display: "inline-block",
            backgroundColor: "seagreen"
          }}
        >
          居中元素
        </div>
      </div>

Answer 26 · 2021-12-06T08:16:10.000Z

居中的几种方式：https://css-tricks.com/centering-css-complete-guide/