logo标签列表

将<div>元素定位在屏幕中央

javascriptcsshtml
192

我想将一个 <div>（或者 <table>）元素置于屏幕中心，不考虑屏幕大小。换句话说，“上”和“下”空出的空间应该相等，“左”和“右”空出的空间也应该相等。我希望仅使用CSS来实现这一点。

我已经尝试了以下方法，但并没有起作用：

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

注意：
<div>元素（或<table>）是否随网页滚动都可以。只要在页面加载时它居中即可。

1
可能是重复的问题：如何将<div>对齐到页面中间。 - Purag
嗨Purmou，你提到的问题是关于将页面定位在中间，即左右两侧空间相等--不是顶部和底部空间相等！ - sumit
1
可能是[如何使用CSS垂直居中一个div的最佳方法]的重复问题（https://dev59.com/eXRC5IYBdhLWcg3wJNmf） - outis
可能是重复的问题：如何在一个 div 中水平居中另一个 div？ - bjb568
14个回答
255

如果您有固定的宽度和高度，简单的方法是：

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}​

请不要使用行内样式！这里有一个可行的例子http://jsfiddle.net/S5bKq/。

18
对于寻求动态高度的人：https://dev59.com/eXRC5IYBdhLWcg3wJNmf - pulkitsinghal
1
@woho87为什么不使用内联样式？是因为众所周知的原因还是有其他我应该了解的特定示例？ - Sharky
@KatrinRaimond 这是出于众所周知的原因，这些原因在这里有记录：https://dev59.com/gnE85IYBdhLWcg3wyGp_ 和 http://webdesign.about.com/od/css/a/aa073106.htm。 - Alex
但是，将divElement的top设置为“％”单位会使divElement占用垂直空间，除非divElement放置在相对元素内部。 - sudip
是position:fixed还是position:absolute？ - Kurkula
虽然这曾经是一段时间的最佳答案，但现在随着@caps_lock的回答所述，CSS更容易了。 - asiop
213

随着转换效果变得更加普遍支持，您可以在不知道弹出窗口的宽度/高度的情况下完成此操作。

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

简单易懂！JSFiddle在这里：http://jsfiddle.net/LgSZV/

更新：请查看https://css-tricks.com/centering-css-complete-guide/，它提供了一个相当详尽的CSS居中指南。由于这篇文章似乎吸引了很多人，将其添加到该回答中。

1
如果弹出窗口中的内容使用了 overflow:auto，在IE9中滚动会出现问题。 :( - joescii
2
并不是所有的浏览器都支持。IE8仍占有20%的浏览器份额（http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0），而且不支持它（http://caniuse.com/#search=transforms）。因此，只有在IE9+上才能使用。 - fotanus
9
这是唯一一个解决方案，您不必指定高度和宽度或使用Javascript，因此我为其点赞。 - Jan Derk
当页面很长并且需要滚动时，使用“position:fixed”非常有用！ - Max
使用 translate 会使您的字体模糊，而且很难修复（解决方案并不总是有效）。参考链接：https://dev59.com/mF0Z5IYBdhLWcg3wvSd2 - Dzmitry Lazerka
显示剩余3条评论
42

它适用于任何对象。 即使您不知道尺寸:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
这是最好的答案。谢谢！ - Halo
41

设置宽度和高度，就可以了。

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

如果您希望元素尺寸具有灵活性（并且不关心旧版浏览器），请使用 XwipeoutX 的答案。
1
这是最干净、最简单的答案，而且还适用于移动设备。+1 - Rusty
它运行良好，但是背后的逻辑是什么？ - Lukas
28

现在，借助HTML 5和CSS 3，这一切变得更加容易：

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;

                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>
19

使用flex布局。它更简单，而且无论你的div大小都能工作：

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

14

如果您有一个固定的

，请将其绝对定位于距离顶部和左侧50%的位置，并在高度和宽度各自的一半处使用负边距进行调整。根据您的需要进行调整：

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}
8
我会在CSS中这样做：
div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

然后在HTML中：

<div class="centered"></div>
4

现在你可以使用更少的代码行数来使用网格布局实现此目的。

.center-this{
  display: grid;
  place-items: center;
  align-content: center;
}
<div class="center-this">
  <div>
    Hello
  </div>
</div>

1
尝试这个。
<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

或者这个。
<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接