css实现居中布局（水平居中，垂直居中，水平居中）

水平居中

• 行内元素：text-align:center

• 块元素

  1. margin: 0 auto;
  2. display:flex;justify-content: center;

垂直居中

1. display:flex;align-items: center;
2. line-height: 100px;

水平垂直居中

<div class="box-wrapper">
  <div class="box"></div>
</div>

将box元素水平垂直居中有以下几种方式

已知宽高

• positon+margin

.box {
  width: 200px;
  height: 200px;
  background: skyblue;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

不清楚宽高

• position+transform

.box {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

• flex布局

.box-wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}