如何居中div？

如何居中div？

水平居中

1    //给div设置一个宽度，然后添加margin:0 auto属性
2 
3     div{
4             width:200px;
5             margin:0 auto;
6     }             

让绝对定位的div居中

 1     div {
 2         position: absolute;
 3         width: 300px;
 4         height: 300px;
 5         margin: auto;
 6         top: 0;
 7         left: 0;
 8         bottom: 0;
 9         right: 0;
10         background-color: pink; /* 方便看效果 */
11     }

水平垂直居中一

 1 //确定容器的宽高 宽500 高 300 的层
 2 //设置层的外边距
 3 
 4     div {
 5         position: relative;     /* 相对定位或绝对定位均可 */
 6         width:500px;
 7         height:300px;
 8         top: 50%;
 9         left: 50%;
10         margin: -150px 0 0 -250px;      /* 外边距为自身宽高的一半 */
11         background-color: pink;     /* 方便看效果 */
12 
13      }

水平垂直居中二

 1  // 未知容器的宽高，利用 `transform` 属性
 2     
 3     div {
 4         position: absolute;     /* 相对定位或绝对定位均可 */
 5         width:500px;
 6         height:300px;
 7         top: 50%;
 8         left: 50%;
 9         transform: translate(-50%, -50%);
10         background-color: pink;     /* 方便看效果 */
11     
12     }

水平垂直居中三

 1 //利用 flex 布局
 2 //实际使用时应考虑兼容性
 3 
 4     .container {
 5         display: flex;
 6         align-items: center;        /* 垂直居中 */
 7         justify-content: center;    /* 水平居中 */
 8 
 9     }
10     .container div {
11         width: 100px;
12         height: 100px;
13         background-color: pink;     /* 方便看效果 */
14     }