实现垂直居中布局

1.已知宽高

/* 1 */
.container{
  width: 300px;
  height: 300px;
  background: yellowgreen;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}
/* 2 */
.container{
  width: 300px;
  height: 300px;
  background: yellowgreen;
  position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
}

2.未知宽高

/* 1 */
.container{
  background: yellowgreen;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* 2 position + auto*/
.container{
  background: yellowgreen;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* 3 flex+ auto */
.wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
}
.wrapper .content {
  margin: auto;
}
/* 4. 父元素居中*/
.wrapper {
   display: flex;
   /* 盒子横轴的对齐方式 */
   justify-content: center;
   /* 盒子纵轴的对齐方式 */
   align-items: center;
}
/* 5.body内部居中*/
.content {
   /* 1vh = 1% * 视口高度 */
   margin: 50vh auto;
   transform: translateY(-50%);
}

css 盒子模型（默认为content-box）

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

image.png

• 标准盒子模型：width = content
• IE盒子模型：width = content + pading + border

• 设置标准盒子模型：box-sizing : content-box
• 设置IE盒子模型：box-sizing : border-box