CSS实现水平垂直居中的几种方法介绍

 我来答
懂视生活
2023-07-27 · 百度认证:湖南福仁科技有限公司官方账号
懂视生活
向TA提问
展开全部

CSS实现水平垂直居中对齐在CSS中实现水平居中,会比较简单。常见的,如果想实现inline元素或者inline-block元素水平居中,可以在其父级块级元素上设置text-align: center实现;如果想实现块级元素的水平居中对齐,可以设置magin: auto。而如果想实现垂直居中对齐,或许就不太容易。
以下,我总结了一些实现水平垂直居中对齐的一些方法。如果有什么不足之处,望指出。
水平垂直居中的实现可以分为两大内容,一是高度随内容自适应变化,一是固定高度。
固定高度实现水平垂直居中方法一最常用的方法是使用height + line-height的方式,设置同样的值,配合text-align的使用,即可实现文本的水平垂直居中对齐
<div class="container">Hello World!</div>
.container {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid red;
}缺点:固定高度,无法实现两行文本的垂直居中对齐
方法二使用绝对定位的方法,配合margin负值使用。可以实现元素的水平垂直居中效果。
<div class="container">Hello World!</div>
.container {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
border: 1px solid red;
}当然了,可以使用CSS3的calc函数简化上面的CSS代码
.container {
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 300px;
border: 1px solid red;
}缺点:固定高度,高度无法自适应内容。元素脱离文档流。
方法三添加空标签的方式,并且使该元素浮动,脱离文档流,避免影响其他元素的布局。
<div class="space"></div>
<div class="container">
<div class="inner">
hello world!
</div>
</div>
.space {
float: left;
height: 50%;
margin-top: -150px;
}
.container {
clear: both;
height: 300px;
border: 1px solid red;
position: relative;
}缺点:这种方式下的垂直居中需要固定高度,无法实现内容自适应高度。同时,出现多余的空div元素。
高度自适应实现水平垂直居中方法一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;
}使用此种方式,不需要固定高度。只需要给定任意高度或者不给高度,即可实现水平垂直居中效果。
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式