在页面布局中，元素水平垂直居中的方法有很多，这里就列举3个简单，用的比较多的方法吧。
情况一、已知元素的宽高
1 <style>
2 .center {
3 width: 200px;
4 height: 200px;
5 background-color: #000;
6 /* 1.绝对定位，加margin */
7 position: absolute;
8 left: 50%;
9 top: 50%;
10 margin-top: -100px;
11 margin-left: -100px;
12 }
13 </style>
14 </head>
15 <body>
16 <div class="center"></div>
17 </body>
情况二、未知元素的宽高
body {
/* 3.flex */
width: 600px;
height: 600px;
display: flex;
/* 主轴居中 */
justify-content: center;
/* 侧轴剧中 */
align-items: center
}
.center {
width: 200px;
height: 200px;
background-color: #000;
/* 2.绝对定位+transform: ; */
/* position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%); */
}
标签：居中,元素,center,top,50%,height,页面,200px From： https://www.cnblogs.com/xytx906/p/17211047.html