手写垂直水平居中

常见的垂直水平居中方法

1. position+margin负值的方法（宽高固定）
2. position+margin:auto （固定宽高)
3. display:table-cell + vertical-align:middle （固定宽度）
4. position+transform（不需要固定宽高）
5. flex （不需要固定宽高）

演示代码

@说人话的前端 - bilibili * { margin: 0; padding: 0; } .box { position: relative; width: 500px; height: 500px; border: 5px solid red; } .item { position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -150px; width: 200px; height: 300px; background-color: #ccc; }