如何实现div的水平垂直居中？？

一、通过flex布局的方式来实现 代码实现：

.box { background-color: aqua; height: 400px; width: 400px; display: flex; justify-content: center; align-items: center; } .box_son { width: 200px; height: 200px; background-color: brown； } <div class="box "> <div class="box_son"> </div> </div>

效果：

二、通过position绝对定位来实现

.box { background-color: aqua; height: 400px; width: 400px; position: relative; } .box_son { background-color: darkkhaki； width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) } <div class="box "> <div class="box_son"></div> </div>

效果：

三、通过table-cell元素来实现 代码实现：

.box { background-color: aqua; height: 400px; width: 400px; display: table-cell; vertical-align: middle; text-align: center; } .box_son { background-color: brown; display: inline-block; width: 200px; height: 200px; }

效果：