利用css及css3属性进行盒子的垂直居中
文章 3231 0 0 0
发布时间:2018年12月17日

概述

在编写前端的时候我们会遇见让一个盒子居中的问题,所以在这里做了一个汇总以便大家使用,如果有哪些更好的方法请联系追梦猪!

1.display实现垂直居中

<style type="text/css">
{
    margin: 0;
    padding: 0;
}
body{
    background: #cc2b39;
}
//1.display: flex兼容到ie10+
.box{
    height: 300px;
    width: 300px;
    border: 2px solid #fff;
    margin: 20px auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    align-items: center;
}
span{
    width: auto;
    height: auto;
    display:block;
    background: #211c1c;
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin: 0 auto;
}
//1.display: table兼容到ie7
.box{
    display:table-cell;
    width:200px;
    height:200px;
    border:2px solid #ccc;
    text-align:center;
    font-size:178px;
    zoom:1;
    vertical-align:middle;
}
span{
    display:table;
    margin: 0 auto;
}
</style>

方法一

<div class="box">
    <div class="help"></div>
    <span><img src="../img/1.png"/></span>
</div>

方法二

<div class="box">
    <span><img src="../img/1.png"/></span>
</div>

总结:

//利用了弹性盒子属性进行了居中,

2.vertical-align实现垂直居中

<style type="text/css">
{
    margin: 0;
    padding: 0;
}
body{
    background: #cc2b39;
}
//1.vertical-align: middle兼容到ie8+
.box{
    height: 300px;
    width: 300px;
    border: 2px solid #fff;
    margin: 20px auto;
    text-align: center;
}
span{
    vertical-align: middle;
    display:inline-block;
    background: #211c1c;
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin: 0 auto;
}
.help{
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
//2.vertical-align: middle兼容到ie7+
.box{
    height: 300px;
    width: 300px;
    border: 2px solid #fff;
    margin: 20px auto;
    text-align: center;
    display: inline-block;
    line-height: 300px;
}
.box img{
    vertical-align:middle;
}
</style>

1.vertical-align: middle兼容到ie8+

<div class="box">
    <div class="help"></div>
    <span><img src="../img/1.png"/></span>
</div>

2.vertical-align: middle兼容到ie8+

<div class="box2">
    <a href="" class="box">
        <img src="../img/3.png" alt="" />
    </a>
</div>

总结:

vertical-align垂直居中

如果a和b都加了一个vertical-align:middle 属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐样式,

那么就互相对齐了对方的中间位置,

也就是它们在垂直方向上的中线对齐了

3.定位实现垂直居中

<style type="text/css">
{
    margin: 0;
    padding: 0;
}
body{
    background: #cc2b39;
}
.box{
    height: 300px;
    width: 300px;
    border: 2px solid #fff;
    margin: 20px auto;
    position: relative;
}
span{
    width: 100px;
    height: 100px;
    display:block;
    background: #211c1c;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -50px;
    margin-left: -50px;
    color: #fff;
    text-align: center;
    font-size: 14px;
}
</style>

运用定位加css3的位移属性translate属性可以使不确定的盒子进行垂直居中显示,应css3属性兼容为ie9+所以我们要看实际情况而定

<div class="box">
    <span>利用定位我们兼容了ie7+</span>
</div>

总结:

此方法虽然可以实现垂直居中的效果,
但是在使用的时候我们遇见的物体可能会是没有固定宽高,
这样定位就显现的捉襟见肘了达不到我们的要求,
但是在确定宽高的前提下此方法兼容方面还是比较不错的

评论专区
Q群
Q群
Q群
反馈
纠错
App