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;
        }

效果同上。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。