您现在的位置是：网站首页> 编程资料编程资料

CSS让高度不确定图片垂直居中的几种技巧纯CSS定位的固定垂直居中浮动层代码，附经典解说《详解定位与定位应用css 实现文字垂直居中用CSS让img input select button 图片,文本框,下拉菜单,按扭垂直居中的CSS垂直居中网页布局实现的5种方法css 垂直居中的几种实现方法DIV+CSS 全屏垂直居中的一个办法css 水平居中，垂直居中，自适应宽度的代码CSS 解决未知高度垂直居中实现代码css实现的让图片垂直居中的方法CSS实现垂直居中的几种方法

2021-09-07 857人已围观

简介在网页设计过程中，有时候会希望图片垂直居中的情况，而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战，本文总结了一些实用方法，需要的朋友可以了解下

在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。
方法一
将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

复制代码

代码如下:

方法1 - 未知高度的图片垂直居中 - www.nowamagic.net