CSS垂直水平居中的几种方式

<div class="box">

  <div class="content"></div>

</div>

（1）.box {

• background-color: #FF8C00;
• width: 300px;
• height: 300px;
• position: relative;

}

.content {

• background-color: #F00;
• width: 100px;
• height: 100px;
• position: absolute;
• left: 50%;
• top: 50%;
• margin: -50px 0 0 -50px;

}

（2）.box { // ----------------------最好用

• background-color: #FF8C00;
• width: 300px;
• height: 300px;
• position: relative;

}

.content {

• background-color: #F00;
• width: 100px;
• height: 100px;
• position: absolute;
• left: 50%;
• top: 50%;
• transform: translate(-50%,-50%);

} 

（3）.box {

• background-color: #FF8C00;
• width: 300px;
• height: 300px;
• display: flex;//flex布局
• justify-content: center;//使子项目水平居中
• align-items: center;//使子项目垂直居中

}

.content {

• background-color: #F00;
• width: 100px;
• height: 100px;

}