CSS 图片水平垂直居中于DIV

opspider 2013-05-28

对于前端工作人员，可能都会碰到要把一个图片垂直居中于一个父元素，当我们不知道它的高度时，应该如何去处理呢，我把我整理过的一个DEMO 上传和大家分享，有什么问题可以互相交流和讨论。不一定来说我的方法就是最好的，如果有更好的方式，互相分享一下。

CSS 图片水平垂直居中于DIV

CSS部分

.zxx_align_box_4 li{float:left; margin-right:13px;}
.zxx_align_box_4 li div{display:table-cell; width:200px; height:200px; border:1px solid #beceeb; *font-size:174px; text-align:center; vertical-align:middle; line-height:200px; }
.zxx_align_box_4 li div img{vertical-align:middle;}

HTML部分

<ul class="zxx_align_box_4 clearfix">
                    <li>
                        <div>   <img src="../img/t1.jpg" /></div>
                    </li>
                    <li>
                        <div>   <img src="../img/t2.jpg" /></div>
                    </li>
                    <li>
                        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm3.jpg"></div>
                    </li>
                    <li>
                        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm4.jpg"></div>
                    </li>
                </ul>

: opspider

相关推荐

CSS设置行内元素和块级元素的水平居中、垂直居中

什么叫行内元素？text-align:center;height:30px;line-height:30px4.CSS设置块级元素的水平居中和垂直居中：关键代码：

drdrsky 0喜欢 / 0评论 2020-06-16

css盒子垂直居中的5种方式

第二种，使用display:table和display:table-cell配合，两个必须分别作用于父盒子和子盒子

dazhifu 0喜欢 / 0评论 2020-06-14

div内容水平垂直居中的正确玩法

<!DOCTYPE html>. text-align: center;height: 300px;border: 1px solid rebeccapurple;display: inline-block;vertical-align: mi

PioneerFan 0喜欢 / 0评论 2020-06-10

css中元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。line-height：用于设置多行元素的空间量

冰蝶 0喜欢 / 0评论 2020-06-05

CSS实现垂直居中的5种方法

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。有些方法在一些浏览器中无效。这个方法把一些div的显示方式设置为表格，因此我们可以使用表格的vertical-al

heavenautumn 0喜欢 / 0评论 2020-05-11

css实现水平垂直居中的几种方式

上面都是在未知外容器和自身宽高下实现水平垂直居中的，如果已知其宽高，可以有更多种简单的方式实现居中，其原理无非是利用绝对定位的top/left偏移、margin偏移、padding填充，在此就不分析了。还有就是单纯文字的居中利用lineHeight和tex

sdbxpjzq 0喜欢 / 0评论 2020-05-04

微信小程序设置图片文字等子元素水平居中或垂直居中

比如有一个图片控件和一个文本控件，想让他垂直居中显示，应该怎么实现？justify-content:center;//设置弹性盒子元素在主轴的对齐方式，这里direction是column只设置垂直居中

guojiadonglian 0喜欢 / 0评论 2020-04-24

css 水平居中，垂直居中

.box { width:300px; height:300px; border:2px solid red;}img{ display:block; width:100px; height:100px; margin:0 auto;}. .

lcyangcss 0喜欢 / 0评论 2020-04-21

div 内容垂直居中

<div style="width: 200px;height: 200px;border: solid red 1px;display: flex;align-items: center;">

HSdiana 0喜欢 / 0评论 2020-03-28

css样式设置元素居中的最简便方式左右居中或垂直居中

父元素需要设置position为非static定位，如果需要左右也居中，加上left: 0;right: 0;即可。

葉無聞 0喜欢 / 0评论 2020-03-23

行内和块状元素水平居中与单行或多行文本垂直居中及隐性改变display类型

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。B-1:为什么选择方法一加入table标签?针对B

lyg0 0喜欢 / 0评论 2020-03-07

实现css文字垂直居中的8种方法

这种方法非常明显的好处就是不必提前知道被居中的元素的尺寸，因为transform中偏移的百分比就是相对于元素自身的尺寸而言。关于baseline值：基线是一条虚构的线。在一行文本中，大多数字母以基线为基准。baseline值设置行中的所有表格数据都分享相同

wcssdu 0喜欢 / 0评论 2020-01-11

css - 水平垂直居中几种方式

position: absolute设置left、top、margin-left、margin-to(定高)；grid，兼容性相对比较差；

冰蝶 0喜欢 / 0评论 2020-01-10

0060 translate、margin 实现绝对定位的盒子水平居中、垂直居中

<!DOCTYPE html>. <meta name="viewport" content="width=device-width, initial-scale=1.0">. <met

玫瑰小妖 0喜欢 / 0评论 2019-12-31

css水平垂直居中的几种方法

在使用HTML5+CSS3进行页面布局时，可以进行排列不同的形式。那么，如何设置元素为水平垂直居中显示呢？去掉position属性，然后设置display值为flex，并添加justify-content和align-items属性

dazhifu 0喜欢 / 0评论 2019-12-31

垂直水平居中

<!DOCTYPE html>. width: 300px;height: 300px;background: red;display: table-cell;vertical-align: middle;width: 100px;height

行吟阁 0喜欢 / 0评论 2019-12-08

css居中-水平居中,垂直居中,上下左右居中

网页布局居中必不可少,其中包括水平居中,垂直居中,上下左右居中,下面一一详述。但子元素是有限制的，只对图片，文字等行内元素有效。

zengni 0喜欢 / 0评论 2019-11-13

css布局：如何实现垂直居中？

5. 父级设置弹性盒子，并设置弹性盒子相关属性；

zuncle 0喜欢 / 0评论 2019-11-08

常用元素水平垂直居中方案

其次子元素的宽高必须已知，因为需要设置子元素的负margin.

谷歌架构师 0喜欢 / 0评论 2019-11-04

CSS解决未知高度垂直居中

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE ，内部子元素定为table-cell ,通过vertical-al

编程手札 0喜欢 / 0评论 2014-05-27

CSS 设置水平居中垂直居中

在其父元素中设置：text-align:center;方法1:为需要设置为居中的元素外加一个table标签;为这个table设置 margin-left：auto;margin-right:auto;方法2:改变这个块元素为display:inline,然

renjianwolai 0喜欢 / 0评论 2015-05-14

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

IT游罠 0喜欢 / 0评论 2015-11-15

CSS实现垂直居中的常用方法

在前端开发过程中，盒子居中是常常用到的。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。下面我们一起来讨论一下实现垂直居中的方法。首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。接下来，需要做

aiolos 0喜欢 / 0评论 2016-04-15

div实现在屏幕水平垂直居中的方法

如果你有更多更好的方法，欢迎亲们补充。

zljiaa 0喜欢 / 0评论 2019-09-07

CSS 垂直居中的七种方法

我之所以整理这类专题的手册，就是CSS相关的内容实在太零散，同时又夹杂着相关的兼容问题。遇到问题时，我们有时过度依赖搜索引擎进行求证解决，解决完也没做认真的归纳和总结。再次遇到此类问题时，我们有可能还不会，这就是我归纳这个手册的目的，我会把日常工作中经常会

lcyangcss 0喜欢 / 0评论 2019-08-16

CSS实现垂直居中的常用方法

<!DOCTYPE html>. width: 100%;height: 100%;margin: 0;padding: 0;width: 300px;height: 300px;background: orange;margin-top: -

loverlucky 0喜欢 / 0评论 2016-03-15

CSS垂直居中的七个方法

我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以

k韶华 0喜欢 / 0评论 2019-07-01

在我水了11种水平垂直居中方法之后，我终于明白了

老生常谈，水平垂直居中。</div>根据如上结构，通过css实现水平垂直居中。绝对定位利用父元素相对定位和子元素绝对定位进行水平垂直居中。根据是否知道子元素宽高，使用数值或者百分比的方式进行定位。}通过设置四向为0和margin: auto实现

tanjiayq 0喜欢 / 0评论 2019-07-01

CSS - 实现垂直居中的几种方式

.box span{margin: auto;}2. 元素为为定宽定高的元素绝对定位和负边距。margin-top:-25px;绝对定位和0原理：当一个绝对定位元素，其对立定位方向属性同时有具体定位数值的时候，流体特性，具有流体特性绝对定位元素的margi

juzhengqian0 0喜欢 / 0评论 2019-07-01

css实现水平垂直居中

纯CSS实现水平垂直居中最近的几场面试都问了这个问题，自己也只答了2种，感觉面试官不满意，特地总结了几种在开发中比较实用的方法，与大家分享。</div>因为margin/padding的百分比值是参照父元素的width，所以无法用百分比。

Alisa0 0喜欢 / 0评论 2019-07-01

css实现水平垂直居中的4种方法

margin-top: -75px; /* 设置margin-left / margin-top 为自身高度的一半 */. transform: translate; /* 使用css3的transform来实现 */

WebVincent 0喜欢 / 0评论 2019-07-01

如何让子元素在父元素中水平垂直居中七种方法?

YannZoe 0喜欢 / 0评论 2019-07-01

纯CSS实现垂直居中的几种方法

垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。top: 0; left: 0; bottom: 0; right: 0

云端漂移 0喜欢 / 0评论 2019-07-01

网页设计的垂直居中

推荐阅读原文原文链接：网页设计的垂直居中此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。

anqier 0喜欢 / 0评论 2019-07-01

老生常谈之CSS的垂直居中

“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。”在 CSS 中对元素进行水平居中是非常简单的：如果它是一个行内元素，就对它的父元素应用 text-align: center; 如果它是一个块级元素，就对它自身应用 m

renpinghao 0喜欢 / 0评论 2019-06-30

前端常见问题——安卓文本无法垂直居中

安卓文本无法垂直居中的问题问题安卓 webview 的字体大小在小于 12 像素的时候无法使用行高来垂直居中。<span style=" display: table-cell; font-size: 10px; vertical-alig

yuyu00 0喜欢 / 0评论 2019-06-29

总结：前端开发中让元素水平垂直居中的方法

前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。水平居中text-align：center;这个是没有浮动的情况下，我们可以先将要居中的块级元素设为inline/inline-block，然后在其父元素上加上属性tex

kbkiss 0喜欢 / 0评论 2019-06-29

一个高度不固定的div，里面的文字如何垂直居中？

我也找了老半天，后来发现一个很强势的写法简单暴力// 加在父级div中垂直居中：align-items:center; display: -webkit-flex;水平居中：justify-content:center; display: -webkit

FZfeng 0喜欢 / 0评论 2018-04-04

解读 CSS 布局之水平垂直居中

text-align是针对父元素进行设置,只能对图片，按钮，文字等行内元素起作用，起作用的首要条件是子元素必须没有被float影响。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。具体来说就是把要居中的元素的margin-le

hlfsunshine 0喜欢 / 0评论 2017-06-23

内部元素横向&&垂直居中的15种常见写法

非常简洁易懂，排名不分先后，开整！

renpinghao 0喜欢 / 0评论 2019-06-28

主流的CSS水平和垂直居中技术大全

水平居中行内元素的水平居中text-align:center只对内联元素或行内块元素有效需要放置于父元素中块级元素的水平居中margin: 0 auto;只对块级元素有效auto指的是自适应宽度。实质就是均分了元素左右的剩余空间，所以元素会居中。但marg

k韶华 0喜欢 / 0评论 2019-06-28

如何使文字在div中水平和垂直居中的css代码

CSS定义字体行间距line-height:xxpx;

zhanghaibing00 0喜欢 / 0评论 2016-10-12

使文字在div中水平和垂直居中

text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX，这样，文字就垂直居中了。<div style="width:200

Ivy 0喜欢 / 0评论 2016-08-14

jQuery制作元素在屏幕中水平垂直居中效果

#outer {height: 600px; overflow: visible;width: 100%;position: relative;} /* or without overflow */. #middle {position: absolute

zhangyang0 0喜欢 / 0评论 2016-06-14

CSS实现垂直居中的常用方法

在前端开发过程中，盒子居中是常常用到的。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。下面我们一起来讨论一下实现垂直居中的方法。首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。接下来，需要做

张大晴 0喜欢 / 0评论 2016-04-15

CSS实现垂直居中的常用方法

首先定义一个需要垂直居中的div元素，宽高均设置为200px;

ozhanjun 0喜欢 / 0评论 2016-04-13

CSS实现多行文本垂直居中

父元素高度不固定。使用padding样式解决父元素高度固定，假设dom结构如下所示

AnyBisks 0喜欢 / 0评论 2019-06-28

解读CSS 布局之水平垂直居中

对一个元素水平垂直居中，在我们的工作中是会经常遇到的，也是CSS布局中很重要的一部分，本文就来讲讲CSS水平垂直居中的一些方法。另外，文中的css都是用less书写的，如果看不懂less，可以把我给的demo链接打开，然后在控制台中查看最终的css，或者是

云端漂移 0喜欢 / 0评论 2016-01-21

不定宽高div水平垂直居中

1.块级元素：定宽 + margin:0 auto;；

srchange 0喜欢 / 0评论 2015-11-15

CSS3 Flexbox轻松实现元素的水平居中和垂直居中

网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技术，下面我就把这种布局叫Flex布局。元素居中，相信作为

MaYangyang 0喜欢 / 0评论 2015-10-15