网页设计中垂直水平居中的几种方法

来自:互联网
时间:2020-01-07
阅读:

垂直水平居中的方案有很多,有时候容易搞混。

其实细分下来主要有两种场景:元素宽高未知的场景、元素宽高已知的场景。针对这两种情况,后文分别列出集中主流的垂直水平居中方案。

元素宽高未知的场景

table 实现垂直水平居中【推荐】

table垂直水平居中方案,是万金油方案,适用性极强,也没有兼容性问题;缺陷是会增加冗余的HTML结构。

<div class="vertical center">
    <div class="box-contAIner">
        <span class="box">haha</span>
    </div></div>.vertical {
    width: 100%;
    height: 100%;
    display: table;
}
.vertical.center {
    text-align: center;
}
.vertical .box-container {
    display: table-cell;
    vertical-align: middle;
}
.vertical .box-container .box {
    vertical-align: middle;
}

transform 实现垂直水平居中【推荐】

transform垂直水平居中方案,同样也是万金油方案,尤其适合移动端;缺陷是只支持IE9及以上的浏览器。

<span class="box">haha</span>
// transform是以自身宽高为基准计算的
.box {
    position: relative; 
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%);    
}

flexbox 实现垂直水平居中

移动端可以使用;缺陷是只支持IE10及以上的浏览器。

<div class="box-container">
    <span class="box"></span></div>// transform是以自身宽高为基准计算的
.box-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}

元素宽高已知的场景

绝对定位 实现垂直水平居中

比较常用的方案,需要已知宽高。

<div class="box-container">
    <span class="box"></span>
</div>
.box-container{
    position: relative;
}
.box-container .box {
    width: 600px; 
    height: 400px;
    position: absolute; 
    left: 50%; 
    top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */}

margin:auto 实现垂直水平居中

特别适合自身有宽高的元素,比如图片等;但是对于其他元素,仍然需要显式设置宽高。

// 图片等自身带宽高的元素,直接 margin: auto; 即可<div class="box-container">
    <img class="box" />
</div>
.box-container{
    position: relative;
}
.img {
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;
}// 其他场景需要显式设置宽高<div class="box-container">
    <span class="box"></span>
</div>
.box-container{
    position: relative;
}
.box {
    width: 100px;
    height: 100px;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;
}
返回顶部
顶部