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

时间:2012-03-25 17:07:13

标签: javascript css html

我想将<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>)与网站滚动,则要么正常。只是希望它在页面加载时居中。

14 个答案:

答案 0 :(得分:176)

简单的方法,如果你有一个固定的宽度和高度:

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

请不要使用内联样式!这是一个工作示例http://jsfiddle.net/S5bKq/

答案 1 :(得分:130)

如今,随着变换越来越受到支持,你可以在不知道弹出窗口的宽度/高度的情况下做到这一点

.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中心的详尽指南。将它添加到这个答案,因为它似乎得到了很多关注。

答案 2 :(得分:27)

设置宽度和高度,你很好。

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

如果您希望元素维度灵活(并且不关心旧版浏览器),请使用 XwipeoutX 的答案。

答案 3 :(得分:18)

它适用于任何对象。即使你不知道大小:

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

答案 4 :(得分:14)

现在,使用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;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

答案 5 :(得分:12)

如果你有一个固定的div绝对位置,它的顶部为50%,左边为50%,负边距分别为高度和宽度的一半左右。根据您的需求调整:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

答案 6 :(得分:5)

使用flex。更简单,无论您的div尺寸如何都可以使用

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

答案 7 :(得分:1)

我会在CSS中执行此操作:

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

然后在HTML中:

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

答案 8 :(得分:0)

试试这个:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

答案 9 :(得分:0)

如果有人在寻找解决方案,

我发现了这个,

它是我发现的最佳解决方案!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

希望你喜欢!

答案 10 :(得分:0)

另一种在中心显示块的简单灵活方法:使用line-heighttext-align进行原生文本对齐。

解决方案:

.parent {
    line-height: 100vh;        
    text-align: center;
}

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

和html示例:

<div class="parent">
  <div class="child">My center block</div>
</div>

我们将div.parent设为全屏,他的单身小孩div.childdisplay: inline-block对齐为文字。

优点:

  • 灵活性,没有绝对值
  • 支持调整大小
  • 在移动设备上运行良好

关于JSFiddle的简单示例:https://jsfiddle.net/k9u6ma8g

答案 11 :(得分:0)

不使用绝对位置的替代解决方案:
我看到很多职位的绝对答案。我不能在不破坏其他东西的情况下使用绝对位置。所以对于那些做不到的人,这就是我所做的:
https://stackoverflow.com/a/58622840/6546317(针对另一个问题发布)。

该解决方案仅关注垂直居中,因为我的子元素已经处于水平居中状态,但是如果您不能以其他方式将它们水平居中,则可以应用相同的方法。

答案 12 :(得分:0)

现在您可以使用 grid 布局和更少的代码行做到这一点。

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

答案 13 :(得分:-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>