水平垂直居中的CSS方法

方法一：position+margin
方法二：display:table-cell
方法三：position+transform
方法四：flex;align-items:center;justify-content:center
方法五：display:flex;margin:auto
方法六：纯position
方法七：兼容低版本浏览器，不固定宽高

前六种方法html部分代码：

前六种方法效果：

方法一:position+margin

这种方案有非常好的跨浏览器支持。有一个缺点就是必须显式声明外部容器元素的height。

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    position: relative;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    margin:auto;
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
}

方法二：display:table-cell

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    display:table-cell;
    text-align: center;
    vertical-align: middle;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    display: inline-block;
}

方法三：position+transform

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    position: relative;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    position: absolute;
    left:50%;
    top:50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

缺点:

• CSStransform在部分就浏览器上需要使用前缀。
• 不支持IE9以下的浏览器，手机端表现良好。
• 外部容器需要设置height(或者用其他方式设置)，因为不能获取绝对定位的内容的高度。
• 如果内容包含文字，现在的浏览器合成技术会使文字模糊不清。

方法四：flex

移动端首选。

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    display:flex;
    align-items: center;
    justify-content: center;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
}

方法五：display:flex;margin:auto

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    display:flex;
}
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    margin:auto;
}

方法六：position

.outer{
    width: 500px;
    height: 400px;
    background-color: blue;
    position: relative;
}
/*方法一*/
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    position: absolute;
    /*left=(父元素的宽-子元素的宽)/2*/
    left:175px;
    /*top=(父元素的高-子元素的高)/2*/ 
   top:150px;
}
/*方法二*/
.inner{
    width: 150px;
    height: 100px;
    background-color: green;
    position: absolute;
    left:50%;
    top:50%;
    /*margin-left=-(子元素的宽)/2*/
    margin-left:-75px;
    /*margin-top=-(子元素的高)/2*/
    margin-top:-50px;
}

方法七：兼容低版本浏览器，不固定宽高

// HTML

    

        
不固定宽高，自适应
    

// CSS
.table{
    width: 500px;/*宽度值不能少*/
    height: 400px;/*高度值不能少*/
    background-color: blue;
    display: table;
    position: relative;
    float: left;
}
.tableCell{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *position: absolute;
    *top:50%;
    *left:50%;
    padding:10px;
}
.content{
    *position: relative;
    *top:-50%;
    *left:-50%;
    background-color: green;
}

运行效果：