将 <div> 元素定位在屏幕中心
Posted
技术标签:
【中文标题】将 <div> 元素定位在屏幕中心【英文标题】:Positioning <div> element at center of screen 【发布时间】:2012-04-09 08:51:00 【问题描述】:我想在屏幕中心放置一个<div>
(或<table>
)元素,而不管屏幕大小。换句话说,“顶部”和“底部”的剩余空间应该相等,“右侧”和“左侧”的剩余空间应该相等。我想只用 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>
注意:
无论<div>
元素(或<table>
)是否随网站滚动,都可以。只是希望它在页面加载时居中。
【问题讨论】:
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-height
和 text-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.child
与display: 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> 元素定位在屏幕中心的主要内容,如果未能解决你的问题,请参考以下文章