使用百分比宽度/高度元素居中

如果您知道元素的确切宽度/高度，您可以使用这个经典技巧将其轻松地居中到其父元素的正中间：将顶部和左侧设置为 50%，并将负边距设置为元素宽度和高度的一半。如果您知道要居中元素的宽度和高度，这很好，但如果它们是百分比呢？

您可能会认为可以使用负百分比边距。这对于水平边距有效，但边距基于宽度（即使是垂直边距也是如此），因此当您尝试使用负顶部边距将内容拉入适当位置时，它会失效。

这里有一个小技巧涉及使用“幽灵”伪元素和 inline-block/vertical-align，非常巧妙。但这要求您要居中的元素为 inline-block，这并不是一个常见的场景。更有可能的是您正在尝试将模态窗口居中。随着小型屏幕/响应式设计成为大趋势，您很可能希望您的对话框具有百分比宽度（或者像最大宽度一样具有未知宽度）。

有一种方法！我在 Codrops 的 Mary Lou 的文章/演示 Nifty Modal Window Effects 中看到了这个技巧。

不要使用负边距，而要使用负 translate() 转换。

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  
  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);
  
  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

使用您当前需要的前缀。

就这样

Check out this Pen!

Francesco Belladonna

# 2013年7月3日

不错的技巧，这将很有用，我总是对应该使用哪种方法进行垂直居中感到“困惑”。

pwerui

# 2013年7月3日

对于真正的垂直对齐更加有用。

Dragos

# 2013年7月3日

不错的支持，需要在使用时进行测试，但绝对很不错！

如果您想知道 - https://caniuse.cn/transforms3d

Dean

评论永久链接# 2013年7月3日

实际上，支持比您想象的要好，因为这只是 2D 转换。

https://caniuse.cn/transforms2d

以下是其他浏览器的 polyfill

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills#css-effects-modules
Kilian Stinson

评论永久链接# 2013年7月3日

这不是 3D 转换。

-> https://caniuse.cn/transforms2d

2D 转换的支持略好。
Thibault

评论永久链接# 2013年7月4日

这是一个 2D 转换…… https://caniuse.cn/transforms2d
Dragos

评论永久链接# 2013年7月4日

我的错误，抱歉！

谢谢大家！我快速搜索了“caniuse transform”，结果出现了。确实比我想象的要好得多。

Edson

# 2013年7月3日

这太棒了！很棒的解决方案！谢谢分享！

Rafael Rinaldi

# 2013年7月3日

这是一个非常不错的技巧！

João da Groselha

评论永久链接# 2013年7月9日

你的胡子真帅。

arnold

# 2013年7月3日

说到 codrops，这个网站很酷，有很多很棒的 UI 演示，但 IE 仍然落后于 CSS3，让人很沮丧。

Ben

# 2013年7月3日

您还可以使用 right+left 或 top+bottom 的组合来居中定义了百分比的绝对元素，而无需使用转换
http://codepen.io/anon/pen/bKuxJ

它的度量方式略有不同，但最终与您的示例在应用 border-box 时的效果相同。

Sean

评论永久链接# 2013年7月4日
支持这个解决方案。我本来想发帖的，但我看到有人比我先发了。
```
position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;
```
宽度和高度独立，完全可扩展，完美居中。
Chris Coyier

评论永久链接# 2013年7月4日

这个也超级赞，可能支持率更高。但请注意，将 right 和 bottom 与 top 和 left 一起使用意味着即使您不使用 width 和 height，也会隐含宽度和高度。

转换方法（尽管文章中的示例和文章标题）无需知道宽度/高度即可正常工作。

以下是完全可扩展的宽度和高度： http://codepen.io/chriscoyier/pen/Lgaij （尝试单击并编辑文本）。
Edson

评论永久链接# 2013年7月7日

有人在 iPad 上打开过它吗？发生了一些奇怪的事情，容器掉到了屏幕底部！

Andrea

# 2013年7月4日

如果我们可以为非固定宽度/高度元素找到类似的方法，那就太好了。

ddprrt

评论永久链接# 2013年7月4日

试试看…… 这个问题的解决方案非常完美！
http://cdpn.io/cmFaj

MaxArt

# 2013年7月4日

这对我来说是新东西！
您可以将它应用于百分比大小的元素，以及具有自动宽度和高度的元素！这真的很棒！

可惜您必须放弃 IE8 支持……

Onlinebyrån

# 2013年7月4日

IE 的支持太糟糕了。真是令人震惊…… :)

ddprrt

# 2013年7月4日

非常棒。这对于自动高度和宽度也适用。

Sergio Pinna

# 2013年7月4日

还不错，还不错。

Eric Constantinides

# 2013年7月4日

我更喜欢“TRBL”方法

position: absolute;
top: 0;
right: 0;
bottom: 0;
left:  0;
margin: auto;
width: 40%;
height: 50%;

我一直使用它，并且可以一直使用到 IE8。

ChrisB

评论永久链接# 2013年7月4日

这个也很好，之前不知道这个。

（但我认为它只适用于显式指定了宽度和高度的情况，而不适用于 auto？)
Sean

评论永久链接# 2013年7月4日
@ChrisB

这种方法根本不需要显式设置宽度和高度。您可以执行以下操作
```
position:absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;
```
它会正常工作。查看 Ben 在几条评论之前发布的这个笔。
Thierry Koblentz

评论永久链接# 2013年7月4日

我认为这里这两个解决方案之间的主要区别在于内容框的布局。检查使用 transform 2D 方法且没有宽度/高度的框的背景颜色。它不像使用 TRBL 技术时那样被绘制得很大（顺便说一句，TRBL 技术也应该在 IE7 中有效）。

Jonathan Pasquier

# 2013年7月4日

即使不知道元素的尺寸，也可以通过结合使用 line-height、display inline-block 和新的 vh css 单位来垂直居中元素：http://codepen.io/anon/full/mkFDK

（不幸的是，在 IE 中不起作用）

jkneb

# 2013年7月4日

天哪，这太棒了…… 它似乎甚至可以与 height:auto 一起使用

Jonathan Weavers

# 2013年7月4日

嘿，Cris -

你上一篇文章[使用百分比宽度/高度元素居中]太棒了。我已经将你的内容添加到我的 Feedly 帐户中。如果你在其他地方发帖，请保持更新。

继续加油 -

Jon

Sim3083

评论永久链接# 2013年7月7日

同意，这太酷了

Fizer

# 2013 年 7 月 4 日

非常棒。为什么它在 jsfiddle 上不起作用

http://jsfiddle.net/fizerkhan/BFqA2/

Chris Coyier

评论永久链接# 2013 年 7 月 4 日

你需要添加前缀到 transform 上。我在 CodePen 中启用了 -prefix-free。

Matt

# 2013 年 7 月 4 日

很棒的技巧；但是，我在测试时遇到了一些问题。实际上，在 Chrome 中，transform 和边框似乎存在问题。取决于宽度/高度的奇偶性。

如果其中一个维度是奇数，那么它的 50% 值就不是整数，并且边框在某些情况下会变得模糊，或者在其他情况下会有偏移。

这是一个你笔的 fork，它说明了这个问题。尝试更改窗口大小以查看偏移量在 Chrome 中出现。

ElijahFowler

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

Matt，虽然这是一个奇怪的问题，但你可以通过添加 background-clip: padding-box 来解决它。这里是我的 fork。

Darwin Mateos

# 2013 年 7 月 4 日

不错的技巧，非常有用。

Rich Denton

# 2013 年 7 月 4 日

谢谢！谢谢！谢谢！这正是我过去一周一直在努力实现的目标，而且不止一个项目，而是两个项目。如上所述，它甚至可以与 height:auto 一起使用，因此我再也不必扭曲图像了。

Elena Vázquez

# 2013 年 7 月 4 日

很棒的解决方案，谢谢！:)

Jacques

# 2013 年 7 月 4 日

将 Ben 在上面的技巧扩展到包含溢出的内容
http://codepen.io/jacmaes/full/EFLjG

Shaz3e

# 2013 年 7 月 4 日

谢谢 Chirs，告诉我另一个 CSS 技巧，以前我使用相对定位来居中我的绝对 div

    .s3-relative{
        position:relative;
        width:100%;
        height:100%;
    }
    .s3-absolute{
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        left:0;
        width:50%;
        height:50%;
        margin:auto;
    }

请建议哪一个更好
http://codepen.io/Shaz3e/pen/zaFbx

Michael Whyte

# 2013 年 7 月 4 日

太棒了……感谢分享这个方便的技巧……

Ludwig

# 2013 年 7 月 5 日

这就是我喜欢阅读这篇博客的原因！！很棒的 CSS 技巧

Manish Salunke

# 2013 年 7 月 5 日

我们可以将它用于垂直居中和水平居中。

.center{ width:500px; height:500px; display:table-cell; vertical-align:middle; text-align:center; }

LorDex

# 2013 年 7 月 5 日

实际上，如果你有元素的宽度和高度，最简单的方法是使用负边距，如下所示： 
.center { width: 300px; height: 300px; top: 50%; left: 50%; margin-left: -150px; margin-top: -150px; }

Paul

# 2013 年 7 月 5 日

我发现这篇文章很棒

Yotam

# 2013 年 7 月 6 日

如果你无论如何都必须支持旧浏览器，我们不要忘记 Javascript 解决方案（使用 jQuery）

<style>
 .center {
  position: absolute;
  top: 50%;
  left: 50%;
}
</style>

<script>
$(function(){
  $center = $('.center');
  $center.css({
    margin-left: '-' + Math.round( $center.width() / 2 ),
    margin-top: '-' + Math.round( $center.height() / 2 )
  });
});
</script>

演示

LorDex

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

对于这样的事情使用 jQuery 实在太过于繁琐了…… :(
Esger Jellema

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

为了使它正常工作，我需要在两个边距中添加 + 'px'。

@LorDex 由于我在整个项目中都使用 jQuery，我认为这并不算过分。

Waqas Gulraiz

# 2013 年 7 月 8 日

对响应式网站很有帮助。

Nathan St. Pierre

# 2013 年 7 月 8 日

我上周在 Nifty Modals (http://tympanus.net/Development/ModalWindowEffects/) 中遇到了这种情况！我认为它真的很酷，但一个负面影响是我们在某些浏览器（Firefox 最常见）中注意到，它使用了一些平滑来执行此转换，如果模态中包含一些复杂的内容（在我们的例子中，是 ExtJS 网格和一些其他组件），它会导致滚动条出现各种奇怪的问题，并导致所有内容都呈现出奇怪的抗锯齿外观。最后我不得不使用负边距技巧来让它正常工作。

Caleb

# 2013 年 7 月 8 日

很酷。这也有助于我在一个固定宽度和另一个 with: auto 元素之间居中一个 width: auto 元素。

Dan

# 2013 年 7 月 8 日

使用 display: block 和 margin: 0 auto 通常也能很好地工作。

Esger Jellema

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

是的，但这不能垂直居中。

Roma Serebryakov

# 2013 年 7 月 9 日

我已经找了几天了，可以响应式地垂直对齐 Div 或图像，并且也可以在 IE 浏览器中使用。最后，我自己做了一些实验，想出了这个方法，到目前为止似乎是最有效的方法，无需使用 CSS3 :after 或 translate() 属性进行额外的 hack... 让我知道它是否也适合你，非常直接

可以说，div 的边距成为它的垂直居中代理。

Matthieu Desjardins

# 2013 年 7 月 9 日

我已经等这个很久了……

迫不及待想尝试一下！

谢谢。

Shrikant

# 2013 年 7 月 10 日

不错的技巧，对我有帮助。

benjamin boxler

# 2013 年 7 月 10 日

使用 flexbox 怎么样？

（假设要居中的项目是文档中的唯一元素，否则 html 可以是 .container 等等。）

html{
  display: box;
  box-orient: vertical;
  box-pack: center;
  box-align: center;
}

.item-to-be-centered{
  display:block;
}

显然，使用 -webkit-box 等等前缀…

Jenny Beaumont

# 2013 年 10 月 1 日

很棒的技巧——但在 Safari 上遇到了问题。我会尝试注释中列出的一些修复方法。感谢分享！

Blake

# 2013 年 10 月 11 日

这可能是使用纯 CSS 垂直居中未知高度元素的最佳方法。不错的技巧。在 Chrome 中，我看到了一些字体渲染问题。也许是 @Nathan St. Pierre 所说的。显然 Chrome 使用 transform: translate(-50%,-50%) 来制作带有 transform: translate(-50%,-50%) 的元素的文本内容。我在 iPhone 5 上查看了它，文本很清晰。
我剩下的问题是，当使用这种方法垂直居中的元素比窗口更高时，比如在手机的横向模式下查看时，元素的顶部会超出屏幕。因此我仍然使用类似 @Yotam 提到的方法，仅当窗口高度大于元素高度时才垂直居中。

Blake

# 2013 年 10 月 18 日

我的意思是说 Chrome 使用 transform: translate(-50%,-50%) 制作带有 transform: translate(-50%,-50%) 的元素的文本内容变得模糊。看起来是一个奇怪的错误。以前从未见过这种情况。

0leg

# 2013 年 10 月 30 日

这让我抓狂
这是这篇文章中的 codepen，减少了样式：截图 1。
这是相同的代码，导入到我的 codepen 中，保存（使用 firefox），然后在 chrome 中打开：截图 2。
同样的问题也发生在我的网站上的模态窗口上…
正如你所看到的，这两个示例中的代码完全相同。为什么????!!!

0leg

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

已解决
添加 webkit 行：-webkit-transform: translate(-50%, -50%);
Chris Coyier

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

这很可能是因为第一个示例中的 CSS 选项中选中了 -prefix-free 选项。

Christopher

# 2013 年 11 月 27 日

使用这种解决方案，在 Google Chrome 31 中，居中的 div 看起来非常模糊。

一些移动浏览器（Android 2.x）无法使用百分比值进行 translate()。

Tony Jacobson

# 2013 年 12 月 13 日

所以这很好用，除了你有一个图像，将其设置为 100% 高度（这会导致宽度比容器的 100% 更宽）的情况。有什么方法可以居中一个最终大于 100% 的 img 吗？

CSS

.mobile-screen-viewport {
  position: relative;
  width: 320px;
  height: 548px;
  background-color: red;
}

#image1 {
  height: 100%;
  position: absolute;
  top: 0px;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
}

这是一个 codepen：http://codepen.io/napawapa/pen/soeGz，其中包含我的示例，并放置了图像。

rafael

# 2014 年 2 月 23 日

我的天啊，你真是我的大英雄！这太聪明了！

Sean

# 2014 年 4 月 15 日

很棒的修复，谢谢！

我无法在使用 skelton.css 的情况下将一些文本居中到图像之上。响应式设计意味着您必须使所有框大小相同，或者根据列数单独修复以居中。这要容易得多，建议用于响应式网站。

Bolloga

# 2014 年 4 月 17 日

很棒的文章！

提醒一下那些像我一样 10 分钟前卡住的人
如果您在页面上有滚动条，请使用 position: fixed 而不是 position: absolute。

adrialanie

评论永久链接# 2014 年 5 月 6 日

谢谢！我一直在尝试为这个问题找到解决方案，已经很久了。你真棒。

DaMunky89

# 2014 年 4 月 22 日

哦，谢天谢地，终于有人想到了除了“表格”或“幽灵元素”之外的办法。这些方法不适用于我的项目需要处理的约束条件！——这种方法完美地起作用了，感谢您的百万分之一！

MrFox

# 2014 年 5 月 10 日

谢谢，很巧妙的技巧。

Matt

# 2014 年 5 月 17 日

我不明白为什么这是居中的……看起来不再起作用了。
使用 Firefox 29 和 Chrome 34

Chris Coyier

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

它在这两个浏览器中都运行良好（这篇文章中的演示）。如果您遇到问题，请创建一个包含您的“无法正常工作”情况的 Pen 并发布。

现在暂且埋藏。如果我们发现了真正的问题，就会将其挖出来。

Uzzal Sarkar

# 2014 年 5 月 22 日

.center{
position: absolute;
height: 50px;
width: 50px;
background: red;
top: calc(50% - 50px / 2); /* 50% - height / 2 */
left: calc(50% - 50px / 2); /* 50% - width / 2 */
}
请记住，calc() 在 IE8 中不受支持。

Humanity

# 2014 年 5 月 24 日

终于！你真是个天才，做到了！
谢谢！

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。