欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

纯CSS如何让图片以及DIV垂直居中显示

程序员文章站 2022-04-24 22:41:18
...

纯CSS如何让图片以及DIV垂直居中显示?

转载自https://www.xuebuyuan.com/2867624.html

图片,也就是img标签,行内元素;div,块级元素。

有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示(当然 ,这里我们抛开表格布局不谈,因为表格可以让内容自动垂直居中)

 

1. 对于图片,如下所示:

 

 
.container{
 height:350px;
 border:1px solid #DDDDDD;
 text-align: center;
 line-height:350px;
}
.container img{
 vertical-align: middle;
 max-height: 350px;
 max-width:350px;
}

即可让它自动垂直居中了,至于个中原理,

text-align: center;

让子元素横向居中显示,这个大家都知道,

 vertical-align: middle;

让行内元素自身纵向居中显示,但是有了这个属性就一定能垂直居中了吗?

纯CSS如何让图片以及DIV垂直居中显示

答案是否定的,相信大多数童鞋都在这碰过壁了,认为明明设置了纵向居中,为什么不生效? 我们必须在父容器上加上

 

 line-height:350px;

设置父容器的行高才行,这两个属性缺一不可。

2. 对于div

对于div的居中,我之前一向用的

 

{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-50px;
    height:100px;
    width:200px;
}

 

 

这种方式来实现,然而最近我发现了另一种方式似乎更优雅一些

 

{
    position:absolute;
    margin:auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
    height:100px;
    width:200px;
}