我首先在body中创建一个div，id名为“mydiv”，class名为“center”，在mydiv样式中，我给div设置了宽度为100%，即为body的宽度，高度我随便设置了一下（实际开发中，很多情况下高度是不固定的）。然后center样式中添加了如下这三句话，即可使div中元素上下左右都居中。
align-items:center; display: -webkit-flex; justify-content:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mydiv {
100%;
height: 580px;
background-color: #2ca1f4;
color: white;
font-size: 50px;
}
.center {
align-items:center;
display: -webkit-flex;
justify-content:center;
}
</style>
</head>
<body>
<div id="mydiv" class="center">
哈哈哈哈
</div>
</body>
</html>
原文链接：https://blog.csdn.net/u011295864/article/details/80675192