CSS居中完全解决方案

水平居中

行内元素

把行内元素嵌套在一个DIV中，并且在DIV中设置以下样式

a{
    text-align: center;
}

 

块级元素

对于定宽的块级元素，我们要设置起margin-top,margin-right 为auto

.center{
        margin: 0 auto;
    }

多个块级元素(inline-block)

多个块级元素，我们将其display设置为inline-block；然后将父级元素设置一下属性

div{
        text-align: center;
    }

多个块级元素(flex)

设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可

body{
      display: flex;
      justify-content: center;
    }

垂直居中

单行 行内元素

将行内元素的height和line-height设置为一致即可

a{
      height: 200px;
      line-height:200px;  
    }

多行 行内元素

如果行内元素文字过多产生多行，则在父级元素设置display: table-cell;vertical-align:middle;

.container{
        width: 300px;
        height: 300px;
        display: table-cell;
        vertical-align:middle;
    }

已知高度的块级元素

将块级元素设置绝对定位，top为50%，margin-top:-height/2

div{
      height: 100px;
      position: absolute;
      top: 50%;
      margin-top: -50px;
      padding:0; 
    }

 

未知高度的块级元素

使用CSS translate,将块级元素设置绝对定位，top为50%，transform: translateY(-50%);

div{
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding:0; 
    }

水平垂直居中

已知高度、宽度的元素

将块级元素设置绝对定位，top为50%，left:50%;margin-top:-height/2;margin-left:-width/2

div{
        width: 150px;
        height: 150px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -75px;
    }

 

已知高度、宽度的元素(flex)

给父级使用flex布局

div{
        display: flex;
        justify-content:center;
        align-items: center;
    }

未知高度、宽度的元素

使用CSS translate

div{
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        -moz-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
    }

 

转自http://www.zhangjiaojiao.cn/qianduanziyuan/2015-03-25/587.html