CSS让图片垂直居中的几种技巧

最新推荐文章于 2023-07-14 09:39:23 发布
最新推荐文章于 2023-07-14 09:39:23 发布
阅读量529 收藏
点赞数
分类专栏： css 文章标签： css 水平垂直居中

在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。

方法一

将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

01<html xmlns="http://www.w3.org/1999/xhtml">
02<head>
03    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
04    <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
05<style type="text/css">
06body {
07    height:100%;
08}
09#box{
10    width:500px;height:400px;
11    display:table;
12    text-align:center;
13    border:1px solid #d3d3d3;background:#fff;
14}
15#box span{
16    display:table-cell;
17    vertical-align:middle;
18}
19#box img{
20    border:1px solid #ccc;
21}
22</style>
23<!--[if lte IE 7]>
24<style type="text/css">?
25#box{
26    position:relative;
27    overflow:hidden;
28}
29#box span{
30    position:absolute;
31    left:50%;top:50%;
32}
33#box img{
34    position:relative;
35    left:-50%;top:-50%;
36}
37</style>
38<![endif]-->
39 
40</head>
41 
42<body>
43<div id="box">
44    <span><img src="images/demo_zl.png" alt="" /></span>
45</div>
46 
47</body>
48</html>
方法二

标准浏览器的情况还是和上面一样，不同的是针对IE6/IE7利用在img标签的前面插入一对空标签的办法。

01<html xmlns="http://www.w3.org/1999/xhtml">
02<head>
03    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
04    <title>方法2 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
05 
06<style type="text/css">
07body {
08    height:100%;
09}
10#box{
11width:500px;height:400px;
12display:table-cell;
13text-align:center;
14vertical-align:middle;
15border:1px solid #d3d3d3;background:#fff;
16}
17#box img{
18border:1px solid #ccc;
19}
20</style>
21<!--[if IE]>
22<style type="text/css">?
23#box i {
24    display:inline-block;
25    height:100%;
26    vertical-align:middle
27    }
28#box img {
29    vertical-align:middle
30    }
31</style>
32<![endif]-->
33 
34 
35 
36</head>
37 
38<body>
39<div id="box">
40    <i></i><img src="images/demo_zl.png" alt="" />
41</div>
42 
43 
44</body>
45</html>
方法三

在img标签外包裹一个p标签，标准浏览器利用p标签的伪类属性:before来实现居中，另外，对于IE6/IE7使用了CSS表达式来实现兼容。

view source print ?
01<html xmlns="http://www.w3.org/1999/xhtml">
02<head>
03    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
04    <title>方法3 - 未知高度的图片垂直居中 - www.nowamagic.net</title>
05 
06<style type="text/css">
07body {
08    height:100%;
09}
10#box{
11    width:500px;height:400px;
12    text-align:center;
13    border:1px solid #d3d3d3;background:#fff;
14}
15#box p{
16    width:500px;height:400px;
17    line-height:400px;  /* 行高等于高度 */
18}
19 
20/* 兼容标准浏览器 */
21#box p:before{
22    content:".";  /* 具体的值与垂直居中无关，尽可能的节省字符 */
23    margin-left:-5px; font-size:10px;  /* 修复居中的小BUG */
24    visibility:hidden;  /*设置成隐藏元素*/
25}
26 
27#box p img{
28    *margin-top:expression((400 - this.height )/2);  /* CSS表达式用来兼容IE6/IE7 */
29    vertical-align:middle;
30    border:1px solid #ccc;
31}
32</style>
33 
34</head>
35 
36<body>
37<div id="box">
38    <p><img src="images/demo_zl.png" alt="" /></p>
39</div>
40 
41</body>
42</html>
yzbben
关注
专栏目录
CSS让高度不确定图片垂直居中的几种技巧
01-19
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 复制代码代码如下: <html xmlns=”http:
图片垂直居中的使用技巧
baoaoba9317的博客
10-18 96
<<style type="text/css"> .box{ width: 200px; height: 200px; background: red; /*非IE的主流浏览器识别的垂直居中的方法*...
css图片垂直居中 让html img图片垂直居中的三种方法
weixin_44098197的博客
05-09 577
一、使用flex实现垂直居中 利用css flex实现垂直居中。flex可能不是实现垂直居中最好的选择，因为IE8,9并不支持它。 现在，为了用flex实现垂直居中，我们首先要创建一个包裹着图片的div元素，然后给它定义一些基础属性。 以下图片img宽度为（设置为）100px，高度为100px。 HTML代码部分： CSS代码部分： body{ background:#999} .flexb...
css 的垂直居中和 图片居中
m0_68807300的博客
03-30 470
方法一 利用定位(常用方法,比较推荐) 方法二 利用margin:auto 方法三 利用display:table-cell 方法四 利用display:flex 设置垂直水平都居中 方法五 计算父盒子与子盒子之间的空间距离 道理如方法一 方法六 利用 transform 页面布局如下 img居中 img { display: table-cell; text-align: center; vertical-ali...
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
图片垂直居中
iteye_17061的博客
02-25 136
转自：http://www.nowamagic.net/librarys/veda/detail/1950   在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成d...
css图片垂直居中 css中如何实现图片垂直居中
12-13
在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现+未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。 题目的难点在于两点： 1.垂直居中； 2.图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法： CSS简单的解决方法： 复制代码代码如下: .box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设
div图片垂直居中 如何使div中图片垂直居中
12-13
div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的 淘宝UED 招聘 中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意，而是有其现实的原因，垂直居中是 淘宝 工作中最常遇到的一个问题，很有代表性。 题目的难点在于两点： 1.垂直居中； 2.图片是个置换元素，有些特殊的特性。 至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法： 复制代码代码如下: .box { /*非IE的主流浏览器识别的垂直居中的
经典：CSS垂直居中的七种方法
weixin_46837985的博客
10-09 1639
点击上方“程序员黑叔”，选择“置顶或者星标”你的关注意义重大！作者：来自互联网我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:...
三种css垂直居中方案
zach 的博客
07-11 417
前言 在使用CSS进行页面布局时，垂直居中的实现不像水平居中那么方便，下面分享3种实现垂直居中的方案。 准备 以下面html为基础进行扩展，一个div里包含一个img，目的是使图片相对于div垂直居中，为了清晰div和图片设置了不同颜色的边框。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible"
纯CSS如何让图片以及DIV垂直居中显示？
随缘的专栏
01-05 1521
图片，也就是img标签，行内元素；div，块级元素。 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示（当然 ，这里我们抛开表格布局不谈，因为表格可以让内容自动垂直居中） 1. 对于图片，如下所示： .container{ height:350px; border:1px solid #DDDDDD; text-align: center;
CSS图片垂直居中详解
weixin_30430169的博客
01-20 42
CSS图片垂直居中问题，困扰了我许久，今天终于可以总结下来了: 方法一：利用定位 HTML结构如： <div class="box"> <a class="pic-wrap" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeN...
CSS图片水平垂直居中的三种方法
最新发布
sunsineq的专栏
07-14 5148
其次最重要的是设置图片元素的vertical-align属性为middle，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐方式。具体方式是先使用定位让图片向右和向下偏移父元素的50%，再相对自身向左和向上偏移50%，这样就实现图片在父元素水平垂直居中了。我们知道img元素为行内快元素，所以首先设置图片元素的父元素里文字水平居中，行高与整体高度一致。设置图片元素的父盒子为弹性盒子，让项目在主轴和侧轴的排列方式都居中。2.使用定位和translate。2.使用定位和translate。
CSS垂直居中的6种方法
Harley567
02-13 4280
CSS垂直居中的6种方法
纯CSS如何让图片以及DIV垂直居中显示
热门推荐
暴网雪易的博客
07-16 1万+
纯CSS如何让图片以及DIV垂直居中显示？ 转载自https://www.xuebuyuan.com/2867624.html 图片，也就是img标签，行内元素；div，块级元素。 有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示（当然 ，这里我们抛开表格布局不谈，因为表格可以让内容自动垂直居中）   1. 对于图片，如下所示：     .container{ ...
css图片垂直居中的几种方法
04-28
CSS图片垂直居中是前端开发中常见的问题之一。以下是几种实现方式： 1. 使用 Flexbox：将图片包裹在一个容器中，设置容器为 Flex 容器，并使用 align-items 和 justify-content 属性来将图片垂直居中。 2. 使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值