高度自适应的水平垂直居中布局

Posted kevoin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高度自适应的水平垂直居中布局相关的知识,希望对你有一定的参考价值。

高度自适应实现水平垂直居中

方法一

CSS3中有transform属性,此属性下有一个translate移动函数,此函数接受两个参数。如果两个参数都为百分比值,此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似。

技术分享图片
<div class="container">Hello World!</div>

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); // 自身宽度和高度的一半
    border: 1px solid red;
}
技术分享图片

 

优点:无需定高度。高度随内容自适应。
缺点:元素脱离文档流。如果需要居中的元素已经在高度上超过了视口,那它的顶部会被视口裁切掉。

方法二

我们知道,可以使用margin来实现水平居中对齐,而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。

技术分享图片
<div class="container">Hello World!</div>

.container {
    width: 300px;
    margin: 50% auto 0;
    border: 1px solid red;
    tarnsform: translateY(-50%);
}
技术分享图片

 

上面代码中,由于百分比是基于父元素(此时的父元素为body元素)的宽度计算的,所以此时的50%加上translate负值并不能实现垂直居中布局。

不过,CSS中存在一个vh(视口高度),也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度,1vh=1%,即1vh等于视口高度的1%。vh单位的浏览器兼容性问题可看vh。因此,以上代码可改为如下,即可实现水平垂直居中效果。

技术分享图片
<div class="container">Hello World!</div>

.container {
    width: 300px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    border: 1px solid red;
}
技术分享图片

 

方法三

CSS3中存在flex布局(伸缩布局盒模型,也叫弹性布局盒模型),对于flex熟悉的朋友来说,使用flex实现水平垂直居中是再简单不过的了。

技术分享图片
<div class="container">
    <div class="inner">
        <p>hello world!</p>
    </div>
</div>

.container {
    display: flex;
    height: 100vh;
}

.inner {
    margin: auto;
}
技术分享图片

 

当我们使父元素display: flex时,margin: auto不仅可以水平居中,也能够实现垂直居中。这是因为auto外边距会平分水平或垂直方向上的额外空间。

当然,也可以使用justify-content: center来定义弹性项目主轴的对齐方式,align-items: center来定义弹性项目侧轴的对齐方式。

技术分享图片
<div class="container">
    <div class="inner">
        <p>hello world</p>
    </div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
技术分享图片

 

方法四

可以使用display: table来模拟表格,并给子元素设置display: table-cell,让其成为表格的某个单元格,同时设置vertical-align: middle,即可实现垂直居中布局

技术分享图片
<div class="container">
    <div class="inner">
        hello world!
    </div>
</div>

.container {
    display: table;         /* 让div以表格的形式渲染 */
    width: 100%;
    border: 1px solid red;
}

.inner {
    display: table-cell;    /* 让子元素以表格的单元格形式渲染 */
    text-align: center;
    vertical-align: middle;
}
技术分享图片

 

使用此种方式,不需要固定高度。只需要给定任意高度或者不给高度,即可实现水平垂直居中对齐


以上是关于高度自适应的水平垂直居中布局的主要内容,如果未能解决你的问题,请参考以下文章

1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?

如何让高度自适应的div中的文字水平垂直居中

垂直和水平居中 div 没有定义的高度 [重复]

CSS布局(圣杯布局双飞翼布局水平垂直居中)

CSS布局(圣杯布局双飞翼布局水平垂直居中)

CSS布局(圣杯布局双飞翼布局水平垂直居中)