容器box內(nèi)的居中：

公共部分css和html結(jié)構(gòu)

<!-- CSS  -->
.box{
  width: 200px;
  height: 200px;
  border: 1px solid #eee;
  box-sizing: border-box;
  font-size: 0;
}
.box div{
  width: 50px;
  height: 50px;
  background: #00cc00;
}

<!-- html布局  -->
<div class="box box1">
  <div></div>
</div>
<!-- 行內(nèi)塊法第二種方案的html  -->
<div class="box box3">
  <span class="con"></span>
  <div></div>
</div>

• 添加font-size:0主要是子元素是inline-block 元素時(shí)部分瀏覽器會(huì)對(duì)換行和空格產(chǎn)生一個(gè)“字符”做處理。

表格布局法

利用display:table-cell結(jié)合vertial-align:middle方法來(lái)實(shí)現(xiàn)垂直居中

.box{
  display: table-cell;
  vertical-align: middle;
}
.box div{
  margin: 0 auto;
}

行內(nèi)塊法

1.利用display: inline-block;結(jié)合vertial-align:middle;方法來(lái)實(shí)現(xiàn)垂直居中，父級(jí)元素的line-height需要設(shè)置為父級(jí)元素本身的高度。

.box{
  line-height: 200px;
  font-size: 0;
  text-align: center;
}
.box div{
  display: inline-block;
  vertical-align: middle;
}

2.原理同上，需新增一個(gè)空的span元素并將其height設(shè)為100%，

.box{
  text-align: center;
}
.box div{
  display: inline-block;
  vertical-align: middle;
}
.box .con{
  display: inline-block;
  width: 0;
  height: 100%;
  overflow: hidden;
  margin-left: -1px;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

flex布局

利用flex布局
1.父級(jí)align-items: center;justify-content: center;
2.子元素設(shè)置align-self: center;
3.子元素設(shè)置margin: auto;

.box{
  display: flex;
  align-items: center;
  justify-content: center;
}

.box{
  display: flex;
  justify-content: center;
}
.box div{
  align-self: center;
}

.box{
  display: flex;
}
.box div{
  margin: auto;
}

絕對(duì)定位

先把元素的左上角放置在（最近的具有定位屬性的祖先元素）視窗的正中心，然后利用負(fù)外邊距（或translate() 變形函數(shù)）把它向左、向上移動(dòng)（移動(dòng)距離相當(dāng)于它自身寬高的一半），從而把元素的正中心放置在窗口的正中心
子元素不固寬高：

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

子元素固定寬高：

.box div{
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

子元素固定寬高：

position:absolute;
top: calc(50% - 3em);
left: calc(50% - 9em);
width: 18em;
height: 6em;

視窗中居中

width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);