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