前言:有许多方法可以实现HTML页面元素水平居中显示,本篇博客我列举一下自己所知道的方法,如果有缺少的,欢迎大家回复。
一、text-align
适应范围:所有元素
在块级元素,如div中,设置其 text-align:center; 可以使其文本内容居中。
因此,若要实现子元素在父元素水平居中显示,便可以设置父元素的 text-align:center;
示例代码如下:
二、margin
适应范围:块级元素
子块级元素在父元素中水平居中显示,使用的最多的属性大概就是margin了,设置子块级元素的 margin:0px auto;
示例代码如下所示:
三、position + margin
1、适用范围:所有元素(该子元素的宽度已知)
这里假设子元素的宽度为100px
示例代码如下所示:
四、position + transform
适用范围:所有元素(子元素的宽度不确定)
这里假设子元素的宽度为100px
以前的方法,可以在js中获取该子元素的宽度,然后像第三种方法那样解决。
但是使用CSS3的新属性transform可以不需要js获取子元素的宽度
示例代码如下所示:
五、弹性伸缩布局 display:flex;
适应范围:所有元素(子元素的宽度不确定)
示例代码如下所示:
一、text-align
适应范围:所有元素
在块级元素,如div中,设置其 text-align:center; 可以使其文本内容居中。
因此,若要实现子元素在父元素水平居中显示,便可以设置父元素的 text-align:center;
示例代码如下:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
height:200px;
text-align:center;
border:1px solid black;
padding:20px;
}
.div21{
display:inline-block;
width:100px;
height:50px;
border:1px solid black;
}
</style>
二、margin
适应范围:块级元素
子块级元素在父元素中水平居中显示,使用的最多的属性大概就是margin了,设置子块级元素的 margin:0px auto;
示例代码如下所示:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
height:200px;
border:1px solid black;
padding:20px;
}
.div21{
width:100px;
height:50px;
margin:0px auto;
border:1px solid black;
}
</style>
三、position + margin
1、适用范围:所有元素(该子元素的宽度已知)
这里假设子元素的宽度为100px
示例代码如下所示:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
height:200px;
border:1px solid black;
padding:20px;
position:relative;
}
.div21{
width:100px;
height:50px;
margin-left:-50px;
position:absolute;
left:50%;
border:1px solid black;
}
</style>
2、适用范围:所有元素(该子元素的宽度可以未知)
示例代码如下所示:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
position:relative;
height:600px;
border:1px solid black;
padding:20px;
}
.div21{
position:absolute;
width:100px;
height:50px;
left:0;
right:0;
margin:auto;
border:1px solid black;
}
</style>
四、position + transform
适用范围:所有元素(子元素的宽度不确定)
这里假设子元素的宽度为100px
以前的方法,可以在js中获取该子元素的宽度,然后像第三种方法那样解决。
但是使用CSS3的新属性transform可以不需要js获取子元素的宽度
示例代码如下所示:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
height:200px;
border:1px solid black;
padding:20px;
position:relative;
}
.div21{
width:100px;
height:50px;
transform:translate(-50%,0);
position:absolute;
left:50%;
border:1px solid black;
}
</style>
五、弹性伸缩布局 display:flex;
适应范围:所有元素(子元素的宽度不确定)
示例代码如下所示:
<div class="div2">
<div class="div21">测试内容,仅供测试使用</div>
</div>
<style>
.div2{
height:200px;
border:1px solid black;
padding:20px;
display:flex;
justify-content:center;
}
.div21{
width:100px;
height:50px;
border:1px solid black;
}
</style>
html元素垂直居中请参考:设置页面元素垂直居中的几种方法