对一个非定长宽的块状元素如何做垂直水平居中

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 284

Author 回答者: huxiamei

flex布局

Author 回答者: XJHxjh0118

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

Author 回答者: linlai163

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

Author 回答者: shfshanyue

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定宽了，你这个不行呀

Author 回答者: linlai163

css position

        .container {
            position: relative;
        }
        .container .item {
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }

非定宽了，你这个不行呀

面试官说，做题前要好好读题。😭

Author 回答者: jkLennon

https://github.com/shfshanyue/Daily-Question/issues/10

Author 回答者: wuzqZZZ

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

.parent {
  display: flex;
  height: 200px;
  background-color: #222;
}
 
.child {
  background-color: red;
  margin: auto;
}

Author 回答者: LIyu2001

---方法一:父级flex
.container{
  display: flex;
  justify-content: center;
  align-items: center;
}
 
---
 
方法二：父级grid .container {
  display: grid;
  justify-content: center;
  align-items: center;
}
 
---方法三：父级定位，子maigin .container {
  position: relative;
}
 
.container .item {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
 
---方法四：父级定位，子位移 .container {
  position: relative;
}
 
.container .item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Author 回答者: perterHUAN

top: 0;
bottom: 0;
left: 0;
right: 0;

方法三设置成和父元素一样大了，这符合题意吗？