聪明的方式把div中心而不是实数？

Question

儿子div可以放在中心,边距是实数.

div.father {
height: 330px;
width: 330px;
border: 1px solid black;
}

div.son {
margin:114px 114px 114px 114px;
border: 1px solid black;
height: 100px;
width: 100px;
}

<div class="father">
  <div class="son"></div>
</div>

儿子div可以放在中心.

也许还有另一种聪明的方法margin:114px 114px 114px 114px;,如果边框宽度改变了,那么边距数会相应改变,如何解决呢？

Answer 1

你可以通过设置父母display:table-cell;vertical-align:middle;和儿子来实现这一目标的一种方式margin:auto

div.father {
height: 330px;
width: 330px;
border: 1px solid black;
display:table-cell;
vertical-align:middle;
}

div.son {
margin:auto;
border: 1px solid black;
height: 100px;
width: 100px;
}

<div class="father">
  <div class="son"></div>
</div>