CSS水平垂直居中总结

web开发网页布局中常常会碰到各种居中，由于浏览器渲染方式的不同，因此存在很多不同的场景，本文将个人平时遇到的一些场景一一列举，以备不时之需。示例代码地址：runjs

1.垂直居中

前提：假定父元素是盒子模型且高度已经设定。

场景一：子元素是行内元素，高度由其内容撑开

这种情况下，需要通过设定父元素的line-height为其高度来使子元素垂直居中

html代码：

<div class="wrap line-height">
    <span class="span">11111</span></div>

css代码：

.wrap{
            width:200px ;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
     }
.span{
            background: red;
     }
.line-height{
            line-height: 200px;
        }

效果:

场景二：子元素是块级元素且高度已经设定。

方法1：

计算子元素的margin-top货margin-bottom,计算方法为（父元素高度-子元素高度）/2

html代码：

<div class="wrap ">
    <div class="div1 margin">111111</div>

css代码：

.wrap{
            width:200px ;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
     }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }
        .margin{
          margin-top: 50px;
        }

效果图：

方法2：计算父元素的padding-top或padding-bottom，计算方法为（父元素高度-子元素高度）/2

html代码：

<div class="wrap  padding">
    <div class="div1 ">111111</div>

css代码：

.wrap{
            width:200px ;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
     }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: blue;
        }
 .padding{
            padding-top: 50px;
        }

效果图同上。

方法3：利用绝对定位，让子元素相对于父元素绝对定位

html代码：

<div class="wrap  relative">
    <div class="div1 absolute">111111</div>

css代码：

.relative{
            position: relative;
        }
        .absolute{
            position: absolute;
            top:50%;
            margin-top: -50px;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: blue;
        }
.wrap{
            width:200px ;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
     }

效果图同上

方法4：使用flexbox

flex-direction：设置或检索伸缩盒对象的子元素在父容器中的位置。

取值：row：默认值，横向从左至右排列（左对齐）。

           row-reverse：相对于row，反转横向排列。

           column：纵向排列。

           column-reverse：相对于column，反转纵向排列，最后一项在最上面。

flex生效需定义其父元素display为flex或者inline-flex。

justify-content：设置货检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

html代码：

<div class="wrap  flex">
    <div class="div1 ">111111</div>
</div>

css代码：

.flex{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

以上css代码请自行加上-moz-，-webkit-。

场景三：子元素是块级元素且高度没有设定。

方法一：给父元素设定display:table-cell;vertical-align:middle。

方法二：使用flexbox，同场景二方法4。

2.水平居中

前提：父元素必须是块级盒子容器，父元素宽度已经设定好。

场景一：子元素是块级元素且宽度没有设定。

该情况下，实际上不存在水平居中一说，因为子元素会充满整个父级元素的宽度。

场景二：子元素是行内元素，子元素宽度由其内容撑开。

该情况下，给父元素设定text-align:center即可。

场景三：子元素是块级元素，且宽度已经设定。

方法一：

给子元素加上margin:0 auto;

html代码：

<div class="wrap">
    <div class="child auto">
        non-child
    </div>
</div>

css代码：

.child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
        .auto{
            margin:0 auto;
        }
.wrap{
            width:200px ;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
     }

效果图：

方法二：通过计算父元素的padding-left或padding-right，计算方法（父元素宽度-子元素宽度）/2

html代码：

<div class="wrap padding">
    <div class="child ">
        non-child
    </div>

css代码：

.padding{
            padding-left: 50px;
        }

方法三：通过计算子元素的margin-left或margin-rigth，计算方法同方法三。

方法四：通过子元素相对父元素绝对定位。

html代码：

<div class="relative1">
    <div class="child absolute1">
        non-child
    </div>
</div>

css代码：

.relative1{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            position: relative;
        }
        .absolute1{
            position: absolute;
            left:50%;
            margin-left:-50px;
        }

效果图同上，这里还要设定子元素margin-left为-50px（子元素宽度/2）是需要消除父元素50%造成的偏移。

方法五：使用flexbox

html代码：

<div class="flex1">
    <div class="child ">
        non-child
    </div>
</div>

css代码：

.flex1{
            width: 300px;
            height: 200px;
            border: 2px solid #ccc;
            box-sizing: border-box;
            display:flex;
            flex-direction: row;
            justify-content:center;
        }

效果同上。