Skip to content

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

New issue
New issue
Open
Open
第 52 题：怎么让一个 div 水平垂直居中#92
Labels
CSS世界
@zeroone001

Description

@zeroone001
zeroone001
opened on Apr 10, 2019 · edited by 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;
}

Activity

Feather130

Feather130 commented on Apr 11, 2019

@Feather130
Feather130
on Apr 11, 2019 · edited by Feather130

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

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

cleverboy32 commented on Apr 11, 2019

@cleverboy32
cleverboy32
on Apr 11, 2019 · edited by yygmind
div.parent {
display: table;
}
div.child {
display: table-cell
vertical-align: middle;
text-align: center;
}
mengsixing

mengsixing commented on Apr 11, 2019

@mengsixing
mengsixing
on Apr 11, 2019

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

Moriarty02 commented on Apr 11, 2019

@Moriarty02
Moriarty02
on Apr 11, 2019

水平垂直居中有好多种实现方式，主要就分为两类不定宽高和定宽高
以在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);
}
  1. 不定宽高
    不定宽高的方法基本都适用于定宽高的情况
    这里把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

cb3570594 commented on Apr 11, 2019

@cb3570594
cb3570594
on Apr 11, 2019

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

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

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

zeroone001

zeroone001 commented on Apr 11, 2019

@zeroone001
zeroone001
on Apr 11, 2019 · edited by zeroone001
Author

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

sohoorc commented on Apr 11, 2019

@sohoorc
sohoorc
on Apr 11, 2019
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

hjskevin commented on Apr 11, 2019

@hjskevin
hjskevin
on Apr 11, 2019

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

yiqingfeng

yiqingfeng commented on Apr 11, 2019

@yiqingfeng
yiqingfeng
on Apr 11, 2019

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

cleverboy32 commented on Apr 12, 2019

@cleverboy32
cleverboy32
on Apr 12, 2019 · edited by cleverboy32

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

zeroone001

zeroone001 commented on Apr 13, 2019

@zeroone001
zeroone001
on Apr 13, 2019
Author

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

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

XinChou16

XinChou16 commented on Apr 15, 2019

@XinChou16
XinChou16
on Apr 15, 2019

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

Caitingwei commented on Apr 20, 2019

@Caitingwei
Caitingwei
on Apr 20, 2019
// 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

huijingL commented on Apr 21, 2019

@huijingL
huijingL
on Apr 21, 2019

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

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

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

yygmind
mentioned this on Jul 14, 2019

16 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS世界

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @ciming@zeroone001@Feather130@Moriarty02@banli17

        Issue actions
          第 52 题：怎么让一个 div 水平垂直居中 · Issue #92 · Advanced-Frontend/Daily-Interview-Question