div+css水平和垂直居中的实现方案

前言

让一个元素水平和垂直居中在布局中是最为常用的了。下面是几种实现的方案。应对不同的场景
注：

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

1. 使用padding实现内部元素的垂直水平居中

.father{padding:50% 5px}
/**内部元素上下50%居中显示，左右5px*/

margin和padding中四个值的先后顺序及区别
顺序为:上右下左,顶部底部属都是1px左右边都为2px时你完全可以写成padding:1px2px;,auto表示居中

2.