前言
日常开发中经常遇到内容水平与垂直居中，不管是文字、图片，我们都把它们放进一个div盒子里来操作。
画一个盒子
<!DOCTYPE html><html lang="en"><body><div class="child"></div></body><style>html {padding: 0;margin: 0;width: 100%;height: 100vh;background-color: #457b9d;box-sizing: border-box;}body {padding: 0;margin: 0;}.child {background-color: #1d3557;width: 200px;height: 200px;}</style></html>
初始盒子展示
使用 flex 居中盒子
在父容器里面增加如下代码
display: flex;/* 水平居中 */align-items: center;/* 垂直居中 */justify-content: center;
具体如下
html {padding: 0;margin: 0;width: 100%;height: 100vh;background-color: #457b9d;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
效果图
