定位<div>屏幕中心的元素
[英]Positioning <div> element at center of screen
问题描述
I want to position a <div> (or a <table> ) element at the center of the screen irrespective of screen size.
我想在屏幕中心放置一个<div> （或一个<table> ）元素，而不管屏幕大小。 In other words, the space left on 'top' and 'bottom' should be equal and space left on 'right' and 'left' sides should be equal.换句话说，“顶部”和“底部”的空间应该相等，“右侧”和“左侧”的空间应该相等。 I would like to accomplish this with only CSS.我想只用 CSS 来完成这个。
I have tried the following but it is not working:我尝试了以下方法，但它不起作用：
<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>
Note:笔记：
It is either way fine if the <div> element (or <table> ) scrolls with the website or not.如果<div>元素（或<table> ）随网站滚动，无论哪种方式都可以。 Just want it to be centered when the page loads.只是希望它在页面加载时居中。
14 个解决方案
解决方案1
240 已采纳 2012-03-25 17:20:23
The easy way, if you have a fixed width and height:简单的方法，如果你有一个固定的宽度和高度：
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Please don't use inline styles!请不要使用内联样式！ Here is a working example http://jsfiddle.net/S5bKq/ .这是一个工作示例http://jsfiddle.net/S5bKq/ 。
解决方案2
190 2014-03-09 05:26:59
With transforms being more ubiquitously supported these days, you can do this without knowing the width/height of the popup如今，随着变换的支持越来越普遍，您可以在不知道弹出窗口的宽度/高度的情况下执行此操作
.popup {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Easy!简单的！ JSFiddle here: http://jsfiddle.net/LgSZV/ JSFiddle在这里：http: //jsfiddle.net/LgSZV/
Update: Check out https://css-tricks.com/centering-css-complete-guide/ for a fairly exhaustive guide on CSS centering.更新：查看https://css-tricks.com/centering-css-complete-guide/以获得关于 CSS 居中的相当详尽的指南。 Adding it to this answer as it seems to get a lot of eyeballs.将其添加到此答案中，因为它似乎吸引了很多眼球。
解决方案3
39 2013-07-09 13:48:04
Set the width and height and you're good.设置宽度和高度，你很好。
div {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 200px;
height: 200px;
}
If you want the element dimensions to be flexible (and don't care about legacy browsers), go with XwipeoutX 's answer.如果您希望元素尺寸灵活（并且不关心旧版浏览器），请使用XwipeoutX的答案。
解决方案4
36 2016-04-30 16:22:08
It will work for any object.它适用于任何对象。 Even if you don't know the size:即使您不知道尺寸：
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
解决方案5
27 2014-08-21 00:10:01
Now, is more easy with HTML 5 and CSS 3:现在，使用 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>
解决方案6
15 2017-12-30 02:08:45
Use flex .使用弹性。 Much simpler and will work regardless of your div size:简单得多，无论您的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>解决方案7
13 2012-03-25 17:21:26
If you have a fixed div just absolute position it at 50% from the top and 50% left and negative margin top and left of half the height and width respectively.如果您有一个固定的div ，只需将其绝对定位在距离顶部 50% 和左侧 50% 的位置，负边距顶部和左侧分别是高度和宽度的一半。 Adjust to your needs:根据您的需要进行调整：
div {
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 300px;
margin-left: -250px;
margin-top: -150px;
}
解决方案8
8 2016-10-04 17:49:30
I would do this in CSS:我会在 CSS 中这样做：
div.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
then in HTML:然后在 HTML 中：
<div class="centered"></div>
解决方案9
1 2014-07-18 02:12:00
try this尝试这个
<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>
Or this或这个
<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>
解决方案10
1 2021-04-18 14:13:47
Now you can do this using grid layout with fewer lines of code.现在，您可以使用更少的代码行使用grid布局来做到这一点。
.center-this{ display: grid; place-items: center; align-content: center; }
<div class="center-this"> <div> Hello </div> </div>
解决方案11
0 2015-04-11 23:30:23
If there are anyone looking for a solution,如果有人在寻找解决方案，
I found this,我找到了这个，
Its the best solution i found yet!这是我找到的最好的解决方案！
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 http://dabblet.com/gist/2872671
Hope you enjoy!希望你喜欢！
解决方案12
0 2016-04-11 21:35:31
Another easy flexible approach to display block at center: using native text alignment with line-height and text-align .另一种在中心显示块的简单灵活的方法：使用带有line-height和text-align的原生文本对齐。
Solution:解决方案：
.parent {
line-height: 100vh;
text-align: center;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: 100%;
}
And html sample:和 html 示例：
<div class="parent">
<div class="child">My center block</div>
</div>
We make div.parent fullscreen, and his single child div.child align as text with display: inline-block .我们将div.parent全屏，他的单个子div.child与display: inline-block对齐为文本。
Advantages:优点：
- flexebility, no absolute values灵活性，没有绝对值
- support resize支持调整大小
- works fine on mobile在手机上运行良好
Simple example on JSFiddle: https://jsfiddle.net/k9u6ma8g JSFiddle 上的简单示例： https ://jsfiddle.net/k9u6ma8g
解决方案13
0 2019-10-30 10:21:21
Alternative solution that doesn't use position absolute:不使用绝对位置的替代解决方案：
I see a lot of position absolute answers.我看到很多职位绝对的答案。 I couldn't use position absolute without breaking something else.我不能在不破坏其他东西的情况下使用绝对位置。 So for those that couldn't as well, here is what I did:所以对于那些不能的人，这就是我所做的：
https://stackoverflow.com/a/58622840/6546317 (posted in response to another question). https://stackoverflow.com/a/58622840/6546317 （针对另一个问题发布）。
The solution only focuses on vertically centering because my children elements were already horizontally centered but same could be applied if you couldn't horizontally center them in another way.该解决方案仅关注垂直居中，因为我的子元素已经水平居中，但如果您无法以其他方式将它们水平居中，则可以应用同样的方法。
解决方案14
-2 2014-06-09 20:59:55
try this:尝试这个：
width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.