CSS之居中方法总结

今天复习了一下关于居中的几种方式

（1）水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div {

  width: 200px;

  margin: 0 auto;

}

（2）让绝对定位的div居中

div {

  position: absolute;

  width: 300px;

  height: 300px;

  margin: auto;

  top: 0;

  left: 0;

  bottom: 0;

  right: 0;

  /* 方便看效果 */

  background-color: pink;

}

（3）水平垂直居中一

 div {

   /* 相对定位或绝对定位均可 */

   position: relative;

   width: 500px;

   height: 300px;

   top: 50%;

   left: 50%;

   /* 外边距为自身宽高的一半 */

   margin: -150px 0 0 -250px;

   /* 方便看效果 */

   background-color: pink;

 }

（4）水平垂直居中二

div {

  /* 相对定位或绝对定位均可 */

  position: absolute;

  width: 500px;

  height: 300px;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  /* 方便看效果 */

  background-color: pink;

}

（5）水平垂直居中三：flex盒模型（很强大，建议多了解一下）

.container {

  display: flex;

  height: 500px;

  width: 500px;

  border: 1px solid #ccc;

  /* 垂直居中 */

  align-items: center;

  /* 水平居中 */

  justify-content: center;

}

.container div {

  width: 100px;

  height: 100px;

  /* 方便看效果 */

  background-color: pink;

}