将图片/Div 水平垂直居中 | CSS-Tricks

Charlie

# 2010 年 1 月 28 日

这在 IE 上不起作用…

Govinder

评论永久链接# 2011 年 6 月 20 日

在我这里 IE 8 可以正常使用。
trusktr

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

如果这不起作用，尝试使用 javascript 设置 top 和 left… ;)

Ant

# 2010 年 5 月 12 日

我会为此使用 display:inline-block。效果好得多（容器和内容的动态垂直和水平尺寸）。

匿名

# 2010 年 9 月 18 日

那么，我该怎么处理 HTML 呢？

Samar Dhwoj Acharya

评论永久链接# 2011 年 8 月 25 日

说真的，我笑出声了。创建一个带有 center 类的 div。
Loren

评论永久链接# 2013 年 12 月 16 日

别想让这个人觉得自己很蠢。这是一个合理的问题。当我学习 css 时，他们没有列出 html 总是让我很迷惑。

Stan

# 2010 年 11 月 9 日

很棒，谢谢。这里没有问题.. 在 IE、FF 等中都很好用。

Alec

# 2011 年 7 月 28 日

哎呀！我真的很努力地让弹出窗口 div 在移动设备上垂直居中。当我向下滚动到屏幕一半并点击链接按钮时，弹出窗口会出现在我无法看到的地方。有什么建议吗？

Pasha

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

我想你已经找到了答案 :)
但对于像我这样的其他新手来说，你需要将“position: absolute”改为“position: fixed”。

Tomdanme

# 2011 年 8 月 5 日

酷！这正是我要找的（我没有说谎。）！

rocky

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

我也是，兄弟

Poochie

# 2011 年 9 月 16 日

我一直都在使用这个，但是… 假设你将窗口调整大小到 100px 宽度。然后内容开始从左侧被切断，你无法滚动到它。有没有解决方法？

Brian FitzGerald

# 2012 年 3 月 23 日

非常好的解决方案。这帮助我在一个流体宽度容器中居中一个“加载”图像。效果很棒。

marcusLAND

# 2012 年 4 月 15 日

这在 iOS 上不起作用，但对我来说所有浏览器都很好用… 为什么？！？

Bob Bobson

# 2012 年 6 月 20 日

所以我必须在 20 分钟内完成一项工作。这太可怕了，到处都是火焰和硫磺以及那些即使是最活跃的想象力也无法在最可怕的梦魇中想象出来的生物。到处都是 CSS 代码，HTML 看起来很糟糕，但我一直在寻找一种方法，一种修复它并使它闪耀着公义的力量和天堂军队美丽的方法。

然后我找到了这个，在那一瞬间，你几乎没有时间眨眼，一切都修复了，而且修复得多么完美。真是奇迹。你必须为它看起来多么美丽而流泪，火焰消退了，硫磺变成了那些你总是可以看到在你的视野边缘跳舞的小象，平衡恢复了。世界一切安好，感谢这篇文章。

谢谢。

Rooth

评论永久链接# 2013 年 10 月 6 日

你让我的日子变得美好，Bob。谢谢你。

todd heyman

# 2012 年 6 月 21 日

非常感谢 Chris - 效果很棒 - 只是和 marcusLAND 说的一样，它在 iPhone 上不起作用（不幸的是在我的业务中，很多人都通过 iPhone 查看我的作品） - 它会把顶部切掉 -

有什么解决方法吗

Daniel Coates

评论永久链接# 2013 年 6 月 22 日

你可以使用媒体查询来检测屏幕宽度，如果屏幕小于高度，则仅使用居中技巧，如果屏幕大于高度，则使用“margin: 0 auto;”进行垂直居中。
Daniel Coates

评论永久链接# 2013 年 6 月 22 日

哎呀，我的意思是高于内容 O.o

Πόρτες Ασφαλείας

# 2012 年 6 月 30 日

谢谢你！

你可以尝试使用 display:inline-block …

bern

# 2012 年 7 月 17 日

我在这方面也遇到了问题…
如果我有不同比例的多个图像？
此外，我的一个文件包含一些文本，这些文本将在图像的左侧，因此它会将剩余空间（从文本结尾到右边界）分开。

Nolan

# 2012 年 8 月 20 日

很好地居中了 div，但我无法让最小宽度起作用。有什么建议吗？谢谢！

Praveen Kumar

评论永久链接# 2015 年 6 月 7 日

你可以使用 min-width: 200px; 让 <div> 的宽度不低于 200px。

Steve Lack

# 2012 年 9 月 21 日

我无法告诉你 Chris 有多少次通过他的精彩技巧和文章为我节省了数小时的时间，并提升了我与客户的声誉。这是我不得不每次遇到时都重新学习的另一个技巧。我认为这篇文章终于为我解决了这个问题！

Neer

# 2012 年 10 月 4 日

它在 IE 9 上可以正常使用，但在 safari 上有问题..

Ron Strilaeff

# 2013 年 1 月 28 日

Chris,

实现方式并不那么明显。我认为你应该展示一个更完整的示例

img 标签对应的 css 和 html 是什么
包含元素中的 css 和 html 是什么

这样人们就可以玩它，并更快地将其应用到他们的案例中。

Ron

gorgono

# 2013 年 2 月 15 日

.content
{
width: 600px;
height: 200px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -300px;
margin-top: -100px;
;
}

Michael

# 2013 年 2 月 16 日

修复了内容在没有滚动选项的情况下消失的问题

.content {width: 600px;height: 400px}

@media only screen and (min-height: 400px) { /你的 div 的高度/
.content{position: absolute;left: 50%;top: 50%;margin-left: -300px;margin-top: -200px}
}

@media only screen and (max-height: 399px) {
.content {margin-top:10px;margin-bottom:10px} /你可以在此处执行任何操作，这只是在顶部和底部添加一些空间，使其看起来仍然漂浮在中间，但会有滚动/
}

显然你需要这个来保持它垂直居中

{padding:0; margin: 0 auto}

Salman

# 2013 年 5 月 8 日

有人可以向我展示 css-tricks.com 页脚悬停线效果的 css 或 js 吗？它是如何发生的。

Saeed Alipoor

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

只需使用 CSS，它是一个在背景中具有水平渐变+在悬停时更改背景位置的跨度。

VR

# 2013 年 5 月 16 日

这种方法在使用 js 的 lightbox 弹出窗口期间特别有用。

Dan

# 2013 年 7 月 1 日

我觉得有点好笑，15 年前用表格很容易做到这一点，现在我们却不能“正确”地做到这一点，没有黑客手段。如果你正在处理一个高度可变的 div，你想要在一个对象中垂直居中，那你也要额外“有趣”。

Elijah1838

# 2013 年 8 月 16 日

谢谢！！我一直在尝试为页面顶部的徽标找出这个方法（一个

<

div class=”logo”> 在一个

<

div class=”header”> 内）。我不得不稍微调整一下，要么把它改成“position: relative;”而不是“position: absolute;”，要么完全删除 position 元素，但它起作用了！！我一定会记住这个巧妙的小技巧，并把它传下去。

Elijah1838

评论永久链接# 2013 年 8 月 16 日

抱歉，不用了……完全删除 position 属性不起作用（我忘记在刷新之前保存 css 样式表……愚蠢的错误），但把它改成“relative”仍然有效！

nand

# 2013 年 11 月 5 日

这个有点不对。它不会在所有情况下都起作用。

要绝对垂直和水平地居中一个内联块级元素，请使用以下方法

elm {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 200px;
    height: 200px;
    margin: auto;
}

Ramesh Thati

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

是的，这是更好的解决方案。

gvesch

# 2013 年 11 月 6 日

谢谢 Chris! 我找了很久才找到这个方法，它起作用了！

Armend Gashi

# 2013 年 12 月 12 日

如果你让父元素的 position 为 relative，而子元素的 position 为 absolute，那么你可以简单地将 top,right,bottom,left = 0; 和 margin: auto;

8            .container {
  9                width: 600px;
 10                height: 600px;
 11                background: red;
 12                position: relative;
 13                margin: 0 auto;
 14            }
 15            .wrap {
 16                width: 200px;
 17                height: 200px;
 18                position: absolute;
 19                top: 0;
 20                right: 0;
 21                bottom: 0;
 22                left: 0;
 23                background: black;
 24                color: white;
 25                margin: auto;
 26            }

herbyderby

# 2014 年 1 月 12 日

发布在 2009 年，但仍然有用。谢谢！

Ancient Code Warrior

# 2014 年 2 月 23 日

这是一个很好的例子，说明为什么 html + css + javascript + 服务器端代码是一个如此荒谬的乱七八糟的东西。这个古怪的范式早就应该“修复”了。但微软和网景不得不打仗。从那以后，它就一直是一个乱七八糟的东西。你们这些脚本小子浪费了大约 95% 的时间试图找出最基本的问题——而不是编写真正有用的 Web 应用程序。应该有一种统一的语言来处理服务器/浏览器范式。我们现在拥有的纯粹是疯狂。

Maliha

# 2014 年 3 月 29 日

尝试了很多方法，却无法在 IE 和 FF 中看到结果（Chrome 正常），我完全困惑了……我的意思是，Chris 的方法应该是唯一一种在所有浏览器中都能起作用的方法！

事实证明，我在 style.css 文件顶部的以下内容完全被忽略了

html {height: 100%;}

我感觉很蠢 =/

Oh.ComeOn

# 2014 年 9 月 18 日

哈哈……真的吗？
这不是一个技巧……这是赤裸裸的。当然，在 50% 的顶部/左侧进行定位，然后让负边距等于 div 尺寸的一半，就能使其居中 =))
但现在没有人使用固定 div。
教这个就像教别人用勺子吃饭……要么他们 3-4 岁，要么有挑战。

它在这里
HTML

<div class="container">
    <span class="helper">
        <img src="my/image.ext" />
    </span>
</div>

CSS

        .container {
            position: fixed; // not really necessary
            box-sizing: border-box; // not really necessary
            top: 0; // whatever
            left: 0; // whatever
            width: 100%; // doesn't matter
            height: 100%; // if no height is set, then this container would have it's content's height and you wouldn't have the chance to notice any vertical alignment
            white-space: nowrap; // !important - otherwise, if container is less wide than (.helper width + img width) then img would fall under .helper)
            text-align: center; // to also align the image horizontally
            margin: 0; // doesn't matter
        }

        .helper {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

        img {
            vertical-align: middle;
            max-height: 90%; // just to leave some some margin.
            max-width: 90%; // just to leave some margin. Or just set it to 100%
        }

这是一个垂直和水平都完美居中的图像。当然，你也可以用一个 div 代替（只需告诉它应该显示为：inline-block;）
并且 .container 不必是固定的，也不必设置高度/宽度（但没有高度设置等于其内容的高度，因此你不会注意到任何垂直对齐）。我只是习惯使用固定位置的容器，因为我主要使用这段代码将图像在整个视窗中居中，在其他所有内容的顶部，就像在画廊中……对于图像，我添加了“最大化”的可能性

Alec

# 2015 年 3 月 6 日

实际上，更好的实现方式是这样的
.center {
position: absolute;
display: block;
width: 300px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}

当然不要忘记供应商前缀！！

Aadil Musavir

# 2015 年 8 月 26 日

.links {
position: absolute;
margin-left: 120px;
margin-top: -130px;
}

<

div class=”links” >在我 div 的中间效果很好 </div

Jennifer

评论永久链接# 2015 年 9 月 17 日

不错——这段代码效果很好——非常感谢。

PaulRevival

# 2015 年 9 月 30 日

这个怎么样？？

<div class="t">
  <div class="td">
    <div class="target"></div>
  </div>
</div>

.t {
 display: table;
 table-layout: fixed;
 width: 300px; /* or percentage */
 height: 300px; /* or percentage */
}
.td {
 display: table-cell;
 vertical-align: middle;
}
.target {
 margin: 0 auto;
}

或者这个适合现代浏览器

<div class="target"></div>

.target {
 position: relative; /* or absolute */
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

james Reegan

# 2016 年 7 月 12 日

我已经完成了四种“精确居中 H&V 位置”的方法。
1. 使用 Flex，在容器中对齐项目。
2. 项目必须有 margin:auto。

html, body{
height: 100%;
}
.wrapper{
display: flex;
width: 100%;
height: 100%;
align-items: center;
}
.center{
width:100px;
height: 100px;
background-color: aquamarine;
margin: auto;
}

Gautam Prajapati

# 2016 年 9 月 13 日

.center {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%, -50%);
}

kartik patel

# 2016 年 9 月 19 日

它真的很有帮助，先生.. 谢谢您。

Michael

# 2017 年 2 月 12 日

我爱你。这刚刚改变了我的整个人生。愿天堂的祝福永远降临在你身上。

评论

发表评论 取消回复

发表评论取消回复