一、div居中显示三种方法
在web前端页面开发过程中,需要实现div居中,一般我们采用以下三种方式:
1、使用CSS设置margin
div {
width: 200px;
height: 200px;
margin: 0 auto;
}
解释:通过设置 div 元素的左右 margin 值为 auto,可以使其在可见区域内居中。
2、使用CSS设置display属性
.container {
display: flex;
justify-content: center;
align-items: center;
}
解释:通过设置容器元素的 display 属性为flex,且设置 justify-content 和 align-items 属性为center可以实现div居中显示。
3、CSS3中新增了transform 属性实现水平垂直居中
.wrapper {
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
解释:通过调整容器坐标原点的位置,使其在水平、垂直方向上偏移50%的距离,并使用position属性为absolute,可以实现div居中显示。
二、div居中显示代码
div居中显示代码为以下CSS样式:
div {
width: 200px;
height: 200px;
margin: 0 auto;
}
三、怎么让div居中显示
要让div居中显示,可以通过以上三种方法中的一种来实现。其中,使用CSS设置margin值的方式比较简单好用,适用于大多数场景。
四、div居中显示最上层
如果需要将div居中显示在最上层,可以通过设置CSS中的z-index属性来实现:
div {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 9999;
}
五、div居中显示上面无空格
如果需要在div上下边界无空格地显示,可以通过设置CSS中的line-height属性来实现:
.container {
height: 50px;
line-height: 50px;
text-align: center;
}
六、图片在div居中显示
在div中,图片的居中显示需要分两种情况考虑,一是图片大小小于div的大小,二是图片大小大于div的大小:
1、图片大小小于div的大小
div {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
}
img {
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
解释:为div元素设置text-align和line-height属性使图片垂直居中。同时为img元素设置max-height和max-width属性,自适应显示图片。
2、图片大小大于div的大小
div {
position: relative;
}
img {
max-width: 100%;
max-height: 100%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
解释:为img元素设置绝对定位和margin值来使其水平、垂直居中显示。
七、div左右居中显示
若需要div左右居中显示,需要将该div设置为inline-block元素,再将其容器设置为text-align:center,并为之前的div设置为no-wrap,实现左右居中:
.container {
text-align: center;
}
div {
display: inline-block;
white-space: no-wrap;
}
八、div水平居中显示
可以将该div的margin-left和margin-right属性值均设置为auto,即可实现水平居中:
div {
margin-left: auto;
margin-right: auto;
}
九、div块居中显示
对于inline-block元素,可以通过设置宽度并使用text-align:center,实现块居中显示;对于block元素,只需使用margin:0 auto,即可实现块居中显示。
1、inline-block元素块居中显示:
.block {
display: inline-block;
width: 200px;
}
.container {
text-align: center;
}
2、block元素块居中显示:
.block {
width: 200px;
margin: 0 auto;
}