# 对一个非定长宽的块状元素如何做垂直水平居中
Issue
欢迎在 Gtihub Issue 中回答此问题: Issue 284 (opens new window)
Author
flex 布局
Author
定位
.parent{ position: relative; } .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Author
css position
.container {
position: relative;
}
.container .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
Author
css position
.container { position: relative; } .container .item { width: 100px; height: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
非定宽了,你这个不行呀
Author
css position
.container { position: relative; } .container .item { width: 100px; height: 50px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
非定宽了,你这个不行呀
面试官说,做题前要好好读题。😭
Author
https://github.com/shfshanyue/Daily-Question/issues/10
Author
<div class="parent">
<div class="child">123456</div>
</div>
.parent {
display: flex;
height: 200px;
background-color: #222;
}
.child {
background-color: red;
margin: auto;
}
Author
---方法一:父级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%);
}