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

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

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

对于图片，如下所示：

.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;
让行内元素自身纵向居中显示，但是有了这个属性就一定能垂直居中了吗？

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

line-height:350px;
设置父容器的行高才行，这两个属性缺一不可。

对于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;
}

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

php图片居中在div,css如何实现图片在div中垂直居中
本文章主要介绍css如何实现图片在div中垂直居中问题,具有一定参考价值,希望能给大家提供帮助平时我们在做页面时经常会遇到让我们把一张图片显示在div正中间但是常常不知道如何去做,今天我们来分享几种 ...
纯css实现给图片加标签
纯css实现给图片加标签原理:通过border.before.after.content.position定位,等等属性实现给图片添加标签样式. 效果截图如下: 代码实例: <!DOCTYPE ...
纯css实现正方体图片旋转效果
纯css实现正方体图片旋转效果目标效果基本思路代码实现主要困难注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果鼠标移入之后,图片开始依次旋转平移,旋转平移完成 ...
html图片显示详情,纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码.html...
纯CSS鼠标经过图片视差弹出层显示详情链接按钮特效代码 * { box-sizing: border-box; } html, body { height: 100%; background:#ddd ...
html如何实现图片轮流播放,纯css如何实现图片轮播
纯css如何实现图片轮播发布时间:2020-07-29 10:23:33 来源:亿速云阅读:119 作者:Leah 纯css如何实现图片轮播?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希 ...
css图片如何垂直居中对齐,css怎样让图片和文字垂直居中对齐
css怎样让图片和文字垂直居中对齐发布时间:2020-11-16 10:10:53 来源:亿速云阅读:99 作者:小新这篇文章主要介绍css怎样让图片和文字垂直居中对齐,文中介绍的非常详细,具有 ...
图片右侧文字垂直居中显示
当需要将图片右侧文字垂直居中显示时,可以使用标签的align属性,将align设置为AbsMiddle 即可. align其他值的作用如下: AbsBottom 图像的下边缘与同一行中最大元素的下边缘 ...
【CSS】单行图片与文字垂直居中
单行图片与文字垂直居中核心关键,是在img标签中的style属性加入vertical-align:middle;样式如果不设置的话,单行图片与文字并排的话,文字默认是底部居中的. 注意如下的代码的i ...
如何使用纯CSS实现固定宽高比div？
在很多场景下,我们都需要一个固定长宽比的div作为容器.直接使用js动态设置固然可行,但在页面大小变化时就不得不通过触发onresize事件来动态设置,十分不便.此文旨在于探讨使用纯CSS实现固定长宽 ...

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

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

最新文章

热门文章