图像的绝对中心（垂直和水平）

Deigote

# 2009 年 9 月 8 日

也可以使用 div 和 CSS 来完成它，而无需使用 px 尺寸或表格。

<div class="contendor" style="border: 1px solid green; margin: 0; padding: 0; display: table">
<div class="contendor-secundario" style="border: 1px solid yellow; margin: 0; padding: 0; display: table-row">
<div class="columna1" style="border: 1px solid red; margin: 0pt; padding: 0pt; vertical-align: middle; display: table-cell">columna uno</div>
<div class="columna2" style="border: 1px solid blue; margin: 0; padding: 0; display: table-cell">columna dos,
la cual es bastante
más alta que la anterior,
y además la podemos hacer
todavía más alta
y la columna 1 ya no se centra</div>
</div>
</div>

它在这里解释，但西班牙语 :(

Jason Goemaat

# 2014 年 4 月 10 日

您可以使用 flex (fiddle)

div.horizontal {
    display: flex;
    justify-content: center;
}

div.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


<div class="horizontal div1">
    <div class="vertical">
        <img src="https://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?s=200&r=pg&d=mm"/>
    </div>
</div>

Sajjad Ahmad

评论永久链接# 2015 年 4 月 21 日

但 flex 属性在 IE 版本中不支持。

Dyllon

# 2009 年 9 月 13 日

使用谷歌网页翻译解释。

Helge-Kristoffer

# 2009 年 9 月 19 日

这被称为“中心”，还是我错了？

Physicsx

评论永久链接# 2013 年 5 月 21 日

谢谢，这很有帮助。

Eelco Deuling

# 2009 年 10 月 6 日

它在英文版中解释

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Jonathan Janssens

评论永久链接# 2011 年 4 月 9 日

这正是我需要的，谢谢。
rajkamal

评论永久链接# 2011 年 10 月 18 日

我看到了示例，如果容器有一些上边距，这些会起作用吗？
fahimshani

评论永久链接# 2012 年 2 月 7 日

不错！但问题是，如果调整浏览器大小，您将无法滚动到顶部。例如，如果我在顶部有一个菜单，我无法查看它！

Craig

# 2010 年 10 月 15 日

为什么宇宙中的每个人都写错了背景速记？

这是正确的方法，也是在所有支持背景速记的浏览器中唯一有效的方法。

background: #FFF url() repeat fixed left top;

/rant

anon

评论永久链接# 2010 年 11 月 25 日

谢谢，我同意你的观点，为什么
Dillon

评论永久链接# 2010 年 11 月 28 日

Craig，从语法上来说，您可以以任何顺序排列您的属性。

background: #fff url() fixed left top;

本质上与

background: url() fixed 0 0 #fff;

无论哪种方式，它都在做完全相同的事情。
bikal

评论永久链接# 2014 年 10 月 20 日

不错的信息，谢谢！

RK

# 2011 年 1 月 10 日

谢谢。这对我帮助很大。

Christina Bruun

# 2011 年 1 月 28 日

太棒了！！

/* logo */

.logo {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 828px;
   height: 104px;
   margin-top: -52px; /* Half the height */
   margin-left: -414px; /* Half the width */
}

Rick Davies

# 2013 年 1 月 16 日

对吧？我喜欢这个。这让我很开心。

#arrr{ position:absolute; top:0; left:0; width:100%; height:100%;}
#black-flag { position:absolute; left:50%; bottom:145px;}
#black-flag img{ position:fixed; margin-left:470px;}

相对于视窗垂直和右对齐固定 div！#fuckyeah！

Iicee

评论永久链接# 2013 年 3 月 20 日
使用 FF，没有固定的图像大小。
```
 

 .container {
    text-align:center;
    height:50%;
 }
 .container img {
    position:relative;
    top:25%;
 }
```
IE 不理解 'top' 的百分比... :(
Gwyn

评论永久链接# 2017 年 7 月 27 日

对我来说最好的解决方案。谢谢。

Ganesh Kondalkar

# 2011 年 3 月 2 日

嗨,

非常感谢 frnd！:)

我一直在寻找相同的东西，现在我得到了它......

Flaviu

# 2011 年 3 月 14 日

感谢大家提供这个技巧.. 我一直在寻找一段时间了..

Mohd

# 2011 年 6 月 25 日

你是个国王，伙计

我建议任何正在寻找关于将图像绝对居中到 DIV 中的解决方案的人访问此页面。

哇！

suman

# 2011 年 9 月 14 日

当您有不同图像大小但无论图像大小都希望它们全部居中时会发生什么。通常在 jQuery 画廊的情况下。我过去两天一直在为此苦苦挣扎。任何帮助将不胜感激。

Jules

评论永久链接# 2011 年 9 月 25 日
嗯嗯，我想只有 javascript 可以做到这一点？O.o
像
```
document.getElementById('myimage').style.margin-top = document.getElementById('myimage').style.height / 2; 
document.getElementById('myimage').style.margin-left = document.getElementById('myimage').style.width/ 2; 
```
应该将 id 为“myimage”的图像居中。
给定绝对位置
```
top = 50%;
left = 50%;
```
如果你想做很多，你可能需要创建一个数组并循环遍历它们？O.o

还有其他人吗？

man

# 2011 年 10 月 31 日

做得好！谢谢！

Swagato Bhatta

# 2012 年 1 月 9 日

您好
请问您是如何制作这个网站的？布局太棒了。

Klaas

# 2012 年 1 月 31 日

???
关于在 POSITION:FIXED 的 div 中垂直居中图像的纯 CSS 解决方案怎么样？
???
非常感谢！

Akmal Ritaudin

# 2012 年 3 月 8 日

嗨，我已经在我的博客上发布了大约 50 篇帖子。现在我必须用一个新的模板来更改我的博客模板。我也上传了图片。
我的新模板的问题是我之前上传的图片不在我想要的位置。我必须重新上传图片，这样它才能固定到我的新模板。是否有谁能帮我解决这个问题。所以之前上传的图片被强制为（300X300 像素）。提前谢谢。

Brett Alton

# 2012 年 3 月 10 日

当图像大小未知时，你会怎么做？

Shawn

评论永久链接# 2013 年 11 月 14 日

这是一个简单的 jQuery 代码，它会检查图片大小，然后将其居中...... 非常适合你不知道图片大小的情况。

https://github.com/devasaur/vlign.js/blob/master/vlign.js

mrityunjay

# 2012 年 3 月 15 日

不错的尝试，让更多人爱上 CSS。继续努力！

buck

# 2012 年 3 月 18 日

我爱你！咳，非常感谢。我一直在尝试弄清楚如何使用绝对定位将图形放置在居中的主体容器上。我意识到你通过“left: 50%”将图形居中，然后使用我的容器宽度除以 2 并调整测量值以获得完美匹配；）。“left: 50%”在使用绝对定位时是一个非常重要的元素。该死，如果我早知道这一点，我就不会更改我的设计和 CSS 代码 :(。好吧，你总是能从经验中学习 :D。

再次感谢，非常感谢。
干杯 :)

Chris Janus

# 2012 年 3 月 30 日

啊 - 一些非常实用的技巧，对我有很大帮助。感谢分享！

Jan K

# 2012 年 4 月 26 日

我想在网页的背景中放一张图片（顶部居中）。每个页面上都使用不同的图片。
除此之外，我还想在页面的中间放一个 1000px 宽的 Div，其中包含内容。
我希望当调整浏览器窗口大小时，所有内容都保持在中间。
怎么做？

Sreevisakh

# 2012 年 5 月 17 日


position: relative;
top: 50%;
margin-top: -25%;

这对我的垂直居中对齐有效。我不能使用一半高度，因为我不知道高度。所以，我使用了百分比。

Matthew Buchanan

# 2012 年 6 月 8 日

最近看到了这个。

.container {
	position: relative;
}
img {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
}

Adam Cheng

评论永久链接# 2012 年 6 月 13 日

这个对图片标签来说太棒了。
janis

评论永久链接# 2012 年 8 月 9 日

这个有效……但你必须在容器中设置高度。这对我不利……
janis

评论永久链接# 2012 年 8 月 9 日

我的解决方案在 IE8 中有效

img{display: block; margin: 0 auto;}
Roxanne

评论永久链接# 2012 年 11 月 13 日

感谢你，Matthew Buchanan！这太完美了 - 干净简洁，适用于各种图片尺寸。它在 Firefox、Chrome、Safari、Opera 和 IE 8 和 9 中都对我有用。
Will Fastie

评论永久链接# 2013 年 1 月 24 日

这是我第一次看到这个，非常有用。我很好奇为什么它有效？
爱死 Matt 了

评论永久链接# 2013 年 2 月 21 日

太棒了！
Mighty

评论永久链接# 2014 年 2 月 11 日

嘿，Matthew，这对我来说在容器中垂直和水平居中图片都有效。谢谢 :)
Travis

评论永久链接# 2015 年 8 月 15 日

完美！感谢 Matthew！
Marko

评论永久链接# 2016 年 1 月 12 日

太棒了，Matthew

谢谢。
ubaidillahumar

评论永久链接# 2017 年 11 月 3 日

感谢你，Matthew，它对我有用！
Cheri

评论永久链接# 2021 年 9 月 14 日

非常感谢。它在 Edge、Chrome 和 Firefox 中都对我有用。

Dante

# 2012 年 6 月 11 日

这是我的想法。

@charset "utf-8";
/* CSS Document */

* {
	margin:0;
	padding:0;
}
html, body {
	height: 100%;
	min-height:100% !important;
	width:100%;
}
#cuerpo {
	position:absolute;
	top: 50%; /*esta a la mitad*/
	margin-top: -25%; /*le resta la mitad del alto*/
	width: 700px;
	height: 500px;
width: 100%;
}
#header {
	position:relative;
	margin: 0 auto 0 auto;
	width: 700px;
	height: 106px;
	background:#09F;
}
#contenido {
	position:relative;
	margin: 0 auto 0 auto;
	width: 700px;
	height: 394px;
	overflow: auto;
	background:#F9F;
	
}

Darrenj

# 2012 年 6 月 22 日

感谢你的教程，我正在尝试将一个段落放在居中图片下方，但当我这样做时，段落仍然停留在浏览器窗口的左上角。

有什么办法可以解决这个问题吗？

seasparrow

# 2012 年 7 月 12 日

基于 Chris 的表格方法，这对我有很大帮助……

html, body, #wrapper {
height:100%;
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
#wrapper td {
vertical-align: middle;
text-align: center;
}

.content {
width: 600px;
height: 400px;
background-color: red;
margin-left: auto;
margin-right: auto;
}

以及 HTML 代码……

Alex S.

# 2012 年 7 月 17 日

很棒的文章！我非常喜欢你的网站，已经收藏了 : )
我在我的所有网站中都使用你的方法来实现绝对居中。

Bryan

# 2012 年 7 月 28 日

/* 使高度为 100% */
#container ul li{
display:inline-block;
height:100%;
}
/* 然后垂直对齐它 */
#container ul li img{
vertical-align:middle;
}
/* 注意：图片也没有固定大小 :) 这在 Firefox 中有效，我已经使用它有一段时间了，所以我必须在跨浏览器测试过，但现在记不起来了。试试看！*/

Noname

# 2012 年 8 月 23 日

更好，更完整：一个可扩展盒子的样式，其中包含标题文本和一张图片。
position: relative 和 width 不是必需的。

div.frameStretch {color: #061f4e; font-family: “mafonte”, Times New Roman, Times, serif; font-weight: normal; line-height: 1.35; text-align: justify; margin-right: auto; margin-left: auto; padding: 4px 8px; position: relative; top: 32px; width: 832px; overflow: hidden; border-width: 24px;
-moz-border-image: url(yourimageborder.png) 24 stretch; -moz-border-radius: 24px;
-webkit-border-image: url(yourimageborder2.png) 24 stretch; -webkit-border-radius: 24px;
-o-border-image: url(.yourimageborder.png) 24 stretch; -o-border-radius: 24px;
-ms-border-image: url(yourimageborder.png) 24 stretch; -ms-border-radius: 24px;
border-image: url(yourimageborder.png) 24 fill stretch; border-radius: 24px;
box-pack: center; box-shadow: 0px 1px 3px #122c53; text-shadow: -1px -1px 1px #cccccc, 1px 1px 1px #ffffff;}

/* — 盒子中的标题 — */
div.frameStretch h2 {font-size: 36px; font-weight: bold; line-height: 24px; margin: 0; padding: 0 0 12px;}
/* — 盒子中的图片 —*/
div.frameStretch img {list-style-position: inside; display: block; margin-top: auto; margin-right: -10px; margin-bottom: auto; padding: 8px 0 8px 8px; position: relative; right: 0; width: 240px; height: 238px; float: right; vertical-align: middle; border-style: none;}

mem

# 2012 年 8 月 31 日

背景图片简直是妙不可言的吻技。

我只是想说声谢谢，感谢你分享这篇文章和其他许多有用的文章。

hudson kotel

# 2012 年 9 月 6 日

您好，

它基本上是关于如何居中图片的，它可以从服务器时间戳开始。CSS 也很容易根据个人喜好进行修改。

http://www.phphunt.com/111/how-to-center-images

LNV

# 2012 年 9 月 13 日

嗨，Chris - 或者任何天才，有没有一种“响应式”的方法来实现这一点？所以，当使用“img{max-width:100%;height:auto}”调整浏览器大小以调整图片大小，有没有办法在 div 内垂直和水平居中它？

Nader dabit

# 2012 年 10 月 3 日

谢谢！

Connect

# 2012 年 10 月 4 日

IE 7 和 IE6 支持吗？

Eoin H

# 2012 年 10 月 7 日

嗨.. 感谢你的教程。我一直使用 css-tricks.com 来学习各种不同的知识，作为一名开发者，你的网站一直是一个很棒的资源，帮助我加快了一些项目的开发速度。所以 强烈推荐！ :)

Nico

# 2012 年 11 月 12 日

谢谢！

Mark

# 2013 年 2 月 23 日

你也可以使用行高方法；就像你垂直对齐一行文本一样。

将图片的容器设置为特定高度，并为其设置与高度相同的行高。然后，将容器内的图片设置为 display: inline-block 或 inline。

如果你也希望图像居中，因为图像已经具有 `display: inline` 属性，你可以为容器添加 `text-align: center` 属性，这将使图像也居中。

砰！

曼迪

# 2013 年 3 月 18 日

非常感谢，这有效！

jasonw

# 2013 年 8 月 19 日

.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

tohid

# 2013 年 8 月 26 日

非常棒
谢谢。 ;)

T 先生

# 2013 年 8 月 26 日

这帮助我很多。非常感谢！

Stefan Gruenwald 博士

# 2013 年 9 月 27 日

我一直使用

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

Shohaib

评论永久链接# 2014 年 9 月 22 日

是的，你也是。我认为这非常不错。

img.center {
display: block;
margin-left: auto;
margin-right: auto;
}

禅

# 2013 年 10 月 30 日

硬核表格模拟器：D（演示）

dl.table {
        xtable-layout: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    dl.table,
    dd.tcell {
        overflow: hidden;
        padding: 0;
        margin: 0;
    }

        dl.table {
            display: table;
        }

        dd.tcell {
            display: table-cell;
        }

        .huerga {
                           /* ограничитель */
                           width: 700px;
                           height: 428px;
            overflow: scroll;
        }

        .huerga .ololo {
            display: table;
            width: 100%; 
            height: 100%;
        }

        .huerga .trololo {
            display: table-cell;
            vertical-align: middle;
        }

/* huergator */
.huergator {
    display: inline-block;
    width: 400px; 
    height: 400px; 
    background: #f00000
}


            <dl class="table">

                <!-- left column -->
                <dd class="tcell">      
                    <div class="left">          
                    </div>
                </dd><!-- #left column -->

                <!-- center column -->
                <dd class="tcell" style="width: 100%; vertical-align: middle;">

                    <div class="center">
                        <div class="huergator"></div>
                    </div>

                </dd><!-- #center column -->


            </dl>



<script type="text/javascript">

    (function ($) {
        $('.huergator').wrap('<center class="huerga"><div class="ololo"><div class="trololo" />"');
    })(jQuery);


</script>

阿南德

# 2013 年 11 月 13 日

img.center {
display: block;
margin-left:auto;
margin-right:auto;
margin-top:2px;
margin-bottom: 2px;
padding: 2px;
}

穆贾希德

# 2013 年 11 月 19 日

这也将起作用

.element{
    width: 32px;
    height: 32px;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

topolm

评论永久链接# 2017 年 12 月 13 日

这个很天才。不用再用容器 div 了。谢谢。

丹尼尔·奥尔森

# 2014 年 1 月 21 日

这是一个我一直在使用的内联技术的 LESS 版本。编辑第一个高度/宽度，让 LESS 处理剩下的！

.logo {
    @logo-height: 60px;
    @logo-width: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: @logo-width;
    height: @logo-height;
    margin-left: -(@logo-width / 2);
    margin-top: -(@logo-height / 2);
}

丹尼尔·奥尔森

评论永久链接# 2014 年 1 月 23 日
这里有一个更简单的混合版本，我用来垂直居中元素。

从一个默认值开始，就像这样。在我的情况下，我将其设置为 120px。
```
.vertically-center(@element-height: 120px) {
        position: absolute;
        top: 50%;
        height: @element-height;
        margin-top: -(@element-height / 2);
    }
```
然后你可以根据需要调整高度。
.vertically-center(80px);

维维克·莫亚尔

# 2014 年 2 月 18 日

我在我的一个项目中尝试过它，发现如果我使用 html5 文档类型，你的 css 背景图像技术在 Chrome 中将无法工作。我必须删除 html5 文档类型才能正常工作。

克里斯·科伊尔

评论永久链接# 2014 年 2 月 18 日

HTML5 文档类型绝对不是问题。那里发生了一些其他的事情。

哈尼

# 2014 年 3 月 7 日

最佳实践克里斯 :)
这些解决方案取决于用户体验，根据我的观察，这是针对在建页面的体验。你的这个技巧是针对它的最佳实践

html {
width:100%;
height:100%;
background:url(logo.png) center center no-repeat;
}

我建议图像大小应为 206 像素正方形，因为这样也能响应式地工作 :)

这是针对文本内容的技巧，但不适用于 lt ie8

html, body{ width:100%; height:100%; margin:0}
body{ display:table;}
div{ display:table-cell; vertical-align:middle; text-align:center}

IJas

# 2014 年 3 月 19 日

查看我的演示，http://jsbin.com/rexuk/2/

Webdev

评论永久链接# 2014 年 10 月 28 日

好想法兄弟 :)

查理

# 2014 年 7 月 18 日

我发现这个 CSS 似乎可以完成工作，当您用百分比而不是像素替换图像类的尺寸时，它似乎可以计算出实际的像素，它很简单

.container {
text-align: center;
width: WHATEVER.px;
height: WHATEVER.px;

}

.image {
width: 80%;
height: 80%;
position: relative;
top: 10%
}

这里面有一点数学，只需将顶部百分比设置为从高度中减去的百分比的一半，在我的例子中，我减去了 20%，这意味着顶部位置是 10%。我不知道这是否能满足所有人的需求，但自从我使用它以来，就没有遇到任何问题！

科斯塔斯

# 2014 年 11 月 9 日

查看这个动画的、无脚本的画廊演示，它将这些原则应用于不同大小的图像，而无需指定大小

无脚本的 css-only 画廊

哈里

# 2015 年 3 月 6 日

最好的解决方案是最简单的。太棒了。谢谢。

尼克·G

# 2015 年 4 月 16 日

img {
position: relative;
top: 50%;
transform: translateY(-50%);
}

萨蒂亚

# 2015 年 8 月 25 日

.container{width:300px; border:1px solide #000; text-align:center; vertical-align:middle;}

.container:before{height:100%; display:inline-block; content:””; text-align:center; vertical-align:middle;}

它将在所有浏览器中工作。

服务器

# 2015 年 12 月 1 日

.image-center {
text-align: center;
}
.image-center:before {
content:”;
width: 1px;
height: 100%;
}
.image-center:before,
.image-center img {
display: inline-block;
vertical-align: top;
margin-right: -5px;
}

Ahesanali Suthar

# 2016 年 6 月 2 日

不错的帖子。

CSS 背景图像技巧：对我有效。

我正在为图书馆设计一个卡片，我必须将 logo 设置为 i-card 的背景。

非常感谢你发布。

shalini

# 2016 年 8 月 1 日

我有一个位于右侧的图像 div 和一个位于左侧的文本 div，我需要将文本
将文本与图像区域对齐。

请指导我如何操作

guruquest

# 2016 年 12 月 11 日

这是一篇关于图像和文本在水平和垂直方向上的居中对齐的非常棒的文章。
在这里，我给了一个关于图像和文本在 div 中居中对齐的小例子。

罗伯特

# 2016 年 12 月 13 日

只需更改宽度和高度，删除“底部”或任何其他内容即可将其粘贴到一侧。
更新你的答案，或者去麦当劳工作。
#element {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
top: 0;
right: 0;
width: 960px;
height: 450px;
}

lvivduncan

# 2017 年 1 月 16 日

*{padding:0; margin:0;}
html{ height: 100vh; width:100%; display:table;}
body{ height: 100vh; width:100%; display: table-cell; vertical-align: middle; text-align: center; font-family: ‘Roboto Condensed’, sans-serif; font-weight: 400; font-size: 20px;}

文字

ronnidc

# 2017 年 8 月 30 日

如果你不知道图像的尺寸，以下 CSS 可能是一个更好的解决方案

img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

或者如果你只需要水平居中它

img {
  position: absolute;
  left: 50%;
  transform: translate(-50%,0);
}

Testig

评论永久链接# 2017 年 11 月 23 日

有史以来最好的解决方案。

乔治

# 2019 年 4 月 8 日

嘿！

变换怎么样？？？

img {
  top: 50%;
  -moz-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%);
}

Taisawebdesigner

# 2021 年 2 月 1 日

谢谢！图像对齐技巧对我有用 :) 我太高兴了！

乔希

# 2022 年 3 月 1 日

使用 javascript

function c() {
  var a = (window.innerHeight - 600) / 2;
  //replace window.innerHeight with parent div width
  var b = (window.innerWidth - 800) / 2;
  //replace window.innerWidth with parent div width
  document.getElementsByTagName("body")[0].style.padding = a + "px" + " " + b + "px";
  //replace body with parent div width
}
setInterval(c, 100); //if window size changes. can remove, but need to call function at least once.

乔希

评论永久链接# 2022 年 3 月 1 日
哎呀，抱歉，600 和 800 应该替换为你 div 的宽度和高度

还有这里
```
document.getElementsByTagName("body")[0].style.padding = a + "px" + " " + b + "px";
//replace body with parent div width
```
我的意思是 //用父 div 替换 body

CSS 背景图像技术

CSS + 内联图像技术

表格技术

CSS 背景图像技术

CSS + 内联图像技术

表格技术

评论

发表评论 取消回复

发表评论取消回复