css设置元素水平垂直居中的方法

看到标题,相信大家并不陌生。这个问题,经常会出现在面试题中。通常会要求面试者写出几种方法。那么,究竟有几种方法,每种方法的兼容情况如何,相信大家很少研究过。今天,我们就一起来看看。

通常分为2种情况,已知元素的宽度或未知。

我们先说说在已知的情况下,要如何设置。

举例说明:有2个元素,让子元素相对于父元素水平垂直居中。

html代码:

<div class="box">
	<div class="innerbox">css设置元素水平垂直居中显示</div>
</div>

1、利用定位及设置元素margin值为自身的一半。

css代码:

.box{
    width: 400px;
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    width: 300px;
    height: 100px; 
    border: 5px solid #f00; 
    font-size: 16px; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin: -50px 0 0 -150px;
}

说明:此方法,在我们工作中经常用到,兼容性好。demo


2、margin:auto

css代码:

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 300px; 
    height: 100px; 
    margin: auto; 
    border: 5px solid #f00;
}

说明: position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高,那么多余的空间,会被margin:auto平均分配。

查看demo


跟已知元素宽高相比,实现未知元素宽高水平垂直居中显示的方法较多。

1、利用css3属性transform实现。

css代码:

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    position: relative;
}
.innerbox{
    position: absolute; 
    left: 50%; 
    top: 50%; 
    border: 5px solid #f00; 
    transform: translate(-50%,-50%);
}

说明:这种方法在移动端被广泛使用。但是,只支持高版本浏览器(IE9+以上的浏览器支持)。demo


2、将父元素设置成display: table, 子元素设置为单元格 display: table-cell。这个方法跟上面介绍的方法不同,它不是让元素居中,而是让元素包含的内容居中。

css代码:

.box{
    width: 400px;
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    display: table;
}
.innerbox{
    display: table-cell;
    vertical-align: middle; 
    text-align: center; 
    border: 5px solid #f00;
}

说明:利用表格的特性,将子元素看成行内元素,实现元素中的文字(文字可以是单行的,也可以是多行的)或图片水平垂直居中。demo


3、css3新的布局方法,弹性布局 display: flex。这个方法,在已知或未知元素宽高的情况下,都能使元素居中显示。

css代码:

.box{
    width: 400px; 
    height: 200px; 
    border: 5px solid #ddd; 
    margin: 50px auto; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.innerbox{
    width: 300px; /*宽度可以省略*/
    height: 100px; /*高度可以省略*/
    border: 5px solid #f00; 
    font-size: 16px;
}


说明: 此方法只支持IE9+以上的浏览器。display: flex代表弹性布局,align-items: center 代表垂直方向上的居中,justify-content: center代表水平方向上的居中。这些是css3中的新属性,感兴趣的同学可以查找相关资料学习。这里不多介绍。demo

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值