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

Posted

技术标签:

【中文标题】将 <div> 元素定位在屏幕中心【英文标题】:Positioning <div> element at center of screen 【发布时间】:2012-04-09 08:51:00 【问题描述】:

我想在屏幕中心放置一个&lt;div&gt;(或&lt;table&gt;)元素,而不管屏幕大小。换句话说,“顶部”和“底部”的剩余空间应该相等,“右侧”和“左侧”的剩余空间应该相等。我想只用 CSS 来完成这个。

我尝试了以下方法,但它不起作用:

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

注意: 无论&lt;div&gt; 元素(或&lt;table&gt;)是否随网站滚动,都可以。只是希望它在页面加载时居中。

【问题讨论】:

How to align a <div> to the middle of the page的可能重复 您好Purmou,您提到的问题是否定位在页面中间,即左右相等的空间——而不是顶部和底部的空间相等! What's The Best Way of Centering a Div Vertically with CSS的可能重复 How to center a div in a div - horizontally?的可能重复 【参考方案1】:

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

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

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

【讨论】:

对于那些寻求动态高度的人:***.com/questions/396145/… @woho87 为什么不使用内联样式?出于众所周知的原因,还是对于具体示例我应该了解更多信息? @KatrinRaimond 这是众所周知的原因,记录在这里***.com/questions/2612483/…和这里webdesign.about.com/od/css/a/aa073106.htm。 但是,将 divElement 的顶部设置为 '%' 单位会使 divElement 占用垂直空间,除非将 divElement 放置在相对元素内。 是位置:固定还是位置:绝对?【参考方案2】:

如果您有一个固定的div,则只需将其绝对定位在距顶部 50% 和左侧 50% 的位置,以及分别为高度和宽度一半的顶部和左侧的负边距。根据您的需要进行调整:

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

【讨论】:

【参考方案3】:

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

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

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

【讨论】:

这是最简洁、最简单的答案,而且对移动设备友好也是如此。 +1 它运作良好,但运作背后的逻辑是什么?【参考方案4】:

如今,随着变换的支持越来越普遍,您可以在不知道弹出窗口的宽度/高度的情况下执行此操作

.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 居中的相当详尽的指南。将其添加到此答案中,因为它似乎吸引了很多眼球。

【讨论】:

如果弹出窗口中的内容使用overflow:auto,则在IE9中滚动会出错。 :( 不那么普遍。 IE8 剧照20% of the browser share 和don't support it。所以IE9+只拿这个。 +1 是唯一无需指定高度和宽度或使用 javascript 的解决方案。 @fotanus 当开发人员停止支持 IE 9 @DIegoVieira 不幸的是,事情并非如此。见the tragedy of the commons。所以人们会继续支持 IE8,因为不想失去这个份额,人们会继续使用,因为它有效。【参考方案5】:

试试这个:

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

【讨论】:

这实际上与接受的答案相同 是的,但是这里我解释一下margin top和left的操作……有人不知道这个…… 那么它实际上与second answer相同【参考方案6】:

试试这个

<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>

【讨论】:

【参考方案7】:

现在,使用 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>

【讨论】:

【参考方案8】:

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

我找到了这个,

这是我找到的最好的解决方案!

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

希望你喜欢!

【讨论】:

【参考方案9】:

在中心显示块的另一种简单灵活的方法:使用与 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

【讨论】:

【参考方案10】:

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

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

【讨论】:

这是最好的答案。谢谢!【参考方案11】:

我会在 CSS 中这样做:

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

然后在 HTML 中:

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

【讨论】:

【参考方案12】:

使用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>

【讨论】:

【参考方案13】:

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

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

【讨论】:

【参考方案14】:

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

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

【讨论】:

以上是关于将 <div> 元素定位在屏幕中心的主要内容,如果未能解决你的问题,请参考以下文章

同时具有两种定位的元素

将底部元素定位在垂直中心

div里想把a元素定位在右下放、除了定位还有办法吗

如何将粘性定位元素移出父div?

文本对齐:中心不适用于 div 元素

如何让三个元素填充一个 div,其中中心元素具有动态宽度?