把容器设置为flex布局,justify-content属性可以实现水平居中,align-items属性可以实现垂直居中。通过一个简单例子一看就明白了。
<html>
<head>
<style type="text/css">
#app{
width: 600px;
height: 600px;
outline: red dotted 3px;
display: flex;
justify-content: center;
align-items: center;
}
#content{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div id="content"></div>
</div>
<script>
</script>
</body>
</html>
效果如下: