如何让一个div水平垂直居中 

 1 div {
 2 position: relative / fixed; /* 相对定位或绝对定位均可 */
 3 width:500px;
 4 height:300px;
 5 top: 50%;
 6 left: 50%;
 7 margin-top:-150px;
 8 margin-left:-250px;
 9  外边距为自身宽高的一半 */
10 background-color: pink; /* 方便看效果 */
11  }
12 
13 .container {
14 display: flex;
15 align-items: center; /* 垂直居中 */
16 justify-content: center; /* 水平居中 */
17  
18 }
19 .container div {
20 width: 100px; /* 可省 */
21 height: 100px; /* 可省 */
22 background-color: pink; /* 方便看效果 */
23 }

 

posted @ 2020-10-19 10:07  俩只猫  阅读(110)  评论(0)  编辑  收藏  举报