如何居中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     }