您的位置:

div居中显示的多种方法及实现

一、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;
}