利用css及css3属性进行盒子的垂直居中

利用css及css3属性进行盒子的垂直居中

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

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;
    }
    /*//运用定位加css3的位移属性translate属性可以使不确定的盒子进行垂直居中显示,应css3属性兼容为ie9+所以我们要看实际情况而定*/
</style>


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


//总结:

//此方法虽然可以实现垂直居中的效果,

//但是在使用的时候我们遇见的物体可能会是没有固定宽高,

//这样定位就显现的捉襟见肘了达不到我们的要求,

//但是在确定宽高的前提下此方法兼容方面还是比较不错的


追梦猪网站致力于前端分享申明:本站内容搜集整理而来请勿商业用途,仅供交流所用,如若侵犯您的权益请邮件站长进行删除!

文明浏览请勿传播非法内容