css/css3实现水平垂直居中

水平居中：

• 行内元素
  只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加属性text-align:center;
• 块级元素
  设置width值并添加属性margin:0 auto;
  • 多个块级元素
    将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center
  • 多个块级元素（flex布局）
    给父级元素添加属性：display:flex;和justify-content:center;

垂直居中：

• 行内元素（单行）
  将元素的父元素height和line-height设置成一样大小即可实现垂直居中
• 行内元素（多行）
  在父元素中设置display:table-cell;vertical-align:middle;
• 块级元素（已知高度）id值为”div“

#div{
    top: 50%;
    margin-top: -50px;  /* margin-top值为自身高度的一半 */
    position: absolute;
    padding:0;
}

水平垂直居中

• 已知宽高 方案1

    
水平垂直居中

• 已知宽高 方案2

    
水平垂直居中

• 未知宽高（css3的transform）

    
水平垂直居中

• 未知宽高（flex布局）

    
水平垂直居中

git地址：https://github.com/zhangge1998/-centering-control