兼容各浏览器版本的垂直居中探析

最新推荐文章于 2021-09-24 14:55:02 发布

jason-roger

最新推荐文章于 2021-09-24 14:55:02 发布

阅读量762

点赞数

分类专栏：前端开发重构兼容性问题垂直居中文章标签： position table 自适应垂直居中

本文链接：https://blog.csdn.net/dami_deng/article/details/44622329

版权

前端开发同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

重构

2 篇文章 0 订阅

订阅专栏

兼容性问题

2 篇文章 0 订阅

订阅专栏

垂直居中一直以来困扰着无数的前端开关人员，网上有各种各样的版本,有用css3新属性做的，有用table做的，不过很少见到一种能实现各种浏览器兼容的版本，而且大部分垂直居中元素的宽度和高度是已知的，这次呢，我为大家带来一点儿福利，提供两种能实现宽高自适应元素的垂直居中兼容方案。

方案一：综合css3新属性和position定位

<!--html-->
<div class="wrapper">
    <div class="con-wrap">
        <div class="con">
            <div>垂直居中</div>
        </div>
    </div>
</div>

/*css*/
.wrapper {
    display: table;
    *position: relative;
    width: 500px;
    height: 500px;
    background: orange;
    margin: 50px;
}
.con-wrap {
    display: table-row;
    *position: absolute;
    *left: 50%;
    *top: 50%;
}
.con {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    *position: relative;
    *left: -50%;
    *top: -50%;
}
}

方案二：利用内联元素的vertical-align属性

<!--html-->
<div class="wrapper">
    <div class="con">垂直居中</div>
    <span class="placeholder"></span>
</div>

/*css*/
.wrapper {
    width: 500px;
    height: 500px;
    margin: 50px;
    text-align: center;
    font-size: 0;
    background: orange;
}
.con {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: middle;
    font-size: 14px;
}
.placeholder {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.wrapper:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}