下面我会详细讲解“块级元素的三种垂直水平居中的方法”的完整攻略。
块级元素
首先简单介绍下什么是块级元素。在HTML中,块状元素指在HTML中以块的形式排列的元素,主要特点是:
- 独占一行
- 每个块级元素都有默认的宽度,与父容器宽度相等
- 可以控制内外边距以及宽高
- 可以容纳其它块元素或行内元素等
在这篇攻略中,我们所介绍的均为块级元素的居中方式。
方法一:使用flex
在CSS中,flex是弹性盒子布局,用于在不同设备和屏幕大小下实现灵活的布局,也常用于实现元素的居中。使用flex居中有很多方式,这里我们介绍一种通用的方式,在容器上设置display:flex,align-items:center,justify-content:center,如下所示:
.container {
display: flex;
align-items: center;
justify-content: center;
}
这里的align-items属性是设置垂直方向上的对齐方式,justify-content属性是设置水平方向上的对齐方式。
下面是一个实例,我们设置一个div容器,其中包含一个标题,应用上述CSS代码,可以实现标题在div容器中水平、垂直居中。
<div class="container">
<h1>Hello World</h1>
</div>
你会发现这个标题被垂直、水平居中。
方法二:使用absolute
第二个方法是使用CSS的absolute属性,我们可以为要居中的元素设置绝对定位,同时设置top和left属性为50%,将元素向下、向右移动它自身宽度和高度的一半,使其处于父元素的中心。如下所示:
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
这里的transform属性是将此元素水平或垂直平移,并可缩放整个元素。
下面是一个实例,我们设置一个容器,其中包含一个div,应用上述CSS代码,可以实现div在容器中水平、垂直居中。
<div class="container">
<div class="center">Centered</div>
</div>
你会发现这个div被垂直、水平居中。
方法三:使用text-align和vertical-align
第三个方法是使用text-align和vertical-align属性实现元素的居中。text-align用于设置行内元素的水平对齐方式,而vertical-align用于设置行内元素的垂直对齐方式。对于块级元素,我们可以将它转换成行内元素,然后应用text-align和vertical-align属性。如下所示:
.container {
text-align: center;
/*为了让vertical-align生效,必须将line-height设置成容器的高度*/
line-height: 300px;
}
.container span {
/*为了让vertical-align生效,必须将display设置成inline-block*/
display: inline-block;
vertical-align: middle;
}
下面是一个实例,我们设置一个容器,其中包含一个span,应用上述CSS代码,可以实现span在容器中水平、垂直居中。
<div class="container">
<span>Centered</span>
</div>
你会发现这个span被垂直、水平居中。
到这里,三种居中的方式已经介绍完毕,希望对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:块级元素的三种垂直水平居中的方法 - Python技术站