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;

        }

效果同上。