水平垂直居中方案 | HZFE - 剑指前端 Offer

[utterances-bot]

水平垂直居中方案 | HZFE - 剑指前端 Offer

以下方案均基于如下布局和基础样式：

https://febook.hzfe.org/awesome-interview/book4/css-vertical-horizontal-center

[superkoenigsegg]

建议使用类选择器

[babopo]

flex还有个简单的
#parent {
display: flex;
width: 100px;
height: 100px;
background: red;
}

#children {
margin: auto;
width: 50px;
height: 20px;
background: blue;
}

[MinimalistYing]

Grid

#parent {
  display: grid;
  place-items: center;
}