Html 如何在浏览器窗口中间居中元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/982054/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center an element in the middle of the browser window?
提问by Kamarey
How can I place some HTML element (say, a <div>, for example) in the middle of a browser window (not page, not screen)? Not depending on browser window size, screen resolution, toolbar layout, etc. E.g. I want it to be in the middle of the browser window.
如何<div>在浏览器窗口（不是页面，不是屏幕）的中间放置一些 HTML 元素（例如 a ）？不取决于浏览器窗口大小、屏幕分辨率、工具栏布局等。例如，我希望它位于浏览器窗口的中间。
采纳答案by Kamarey
I surprised that nobody said about position=fixed. It makes exactly what I asked and works in all "human" browsers and IE since 7.
我很惊讶没有人说 position=fixed。它完全符合我的要求，并且自 7 以来在所有“人类”浏览器和 IE 中都有效。
回答by PatrikAkerstrand
To do this you need to know the size of the element you are centering. Any measurement will do (i.e. px, em, percent), but it has to have a fixed size.
为此，您需要知道要居中的元素的大小。任何测量都可以（即 px、em、百分比），但它必须有一个固定的大小。
The css will look as follows:
css 将如下所示：
// Replace X and Y with a number and u with a unit. do calculations
// and remove parens
.centered_div {
width: Xu;
height: Yu;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(X/2)u;
margin-top: -(Y/2)u;
}
Edit: This centers in the viewport. You can only center in the browser window using JavaScript. But that might be good enough anyway, since you probably want to display a popup/modal box?
编辑：这在视口中居中。您只能使用 JavaScript 在浏览器窗口中居中。但这可能已经足够了，因为您可能想要显示一个弹出/模式框？
回答by Saman Sadeghpour
div#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
回答by Cuga
This is completely possible with just CSS-- no JavaScript needed: Here's an example
这完全可以通过 CSS 实现——不需要 JavaScript： 这是一个例子
Here is the source code behind that example:
这是该示例背后的源代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>
<style type="text/css" media="screen"><!--
body
{
color: white;
background-color: #003;
margin: 0px
}
#horizon
{
color: white;
background-color: transparent;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content
{
font-family: Verdana, Geneva, Arial, sans-serif;
background-color: transparent;
margin-left: -125px;
position: absolute;
top: -35px;
left: 50%;
width: 250px;
height: 70px;
visibility: visible
}
.bodytext
{
font-size: 14px
}
.headline
{
font-weight: bold;
font-size: 24px
}
#footer
{
font-size: 11px;
font-family: Verdana, Geneva, Arial, sans-serif;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 20px;
visibility: visible;
display: block
}
a:link, a:visited
{
color: #06f;
text-decoration: none
}
a:hover
{
color: red;
text-decoration: none
}
--></style>
</head>
<body>
<div id="horizon">
<div id="content">
<div class="bodytext">
This text is<br>
<span class="headline">DEAD CENTRE</span><br>
and stays there!</div>
</div>
</div>
<div id="footer">
<a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
回答by Delian Krustev
Here is:
这是：
- HTML+CSS only solution - no JavaScript needed
- It does not require that you to know the content size in advance
- The content stands centered on window resizing
- 仅 HTML+CSS 解决方案 - 无需 JavaScript
- 它不需要您提前知道内容大小
- 内容以窗口大小调整为中心
And the example:
和例子：
<!DOCTYPE html>
<html>
<head>
<title>HTML centering</title>
<style type="text/css">
<!--
html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
#td_wrap { vertical-align: middle; text-align: center; }
-->
</style>
</head>
<body>
<table id="tbl_wrap"><tbody><tr><td id="td_wrap">
<!-- START: Anything between these wrapper comment lines will be centered -->
<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>
<!-- END: Anything between these wrapper comment lines will be centered -->
</td></tr></tbody></table>
</body>
</html>
Take a look at the original URL for full info: http://krustev.net/html_center_content.html
查看完整信息的原始 URL：http: //krustev.net/html_center_content.html
You can do whatever you like with this code. The only condition is that any derived work must have a reference to the original author.
您可以使用此代码做任何您喜欢的事情。唯一的条件是任何衍生作品都必须引用原作者。
回答by Anand Mohanty
If you don't know the size of the browser you can simply center in CSS with the following code:
如果您不知道浏览器的大小，您可以使用以下代码简单地将 CSS 居中：
HTML code:
HTML代码：
<div class="firstDiv">Some Text</div>
CSS code:
CSS代码：
.firstDiv {
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F1F1F1;
}
This also helps in any unforeseen changes in the future.
这也有助于未来发生任何不可预见的变化。
回答by Caner
This should work with any divor screen 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>See more details about flexhere. This should work on most of the browsers, see compatibility matrix here.
回答by Ahmed Elsawalhy
I had a lot of problems with centring and alignment until I found Flexbox as a recommendation in a guide.
在我发现 Flexbox 作为指南中的推荐之前，我在居中和对齐方面遇到了很多问题。
I'll post a snippet (that works with Chrome) here for convenience:
为方便起见，我将在此处发布一个片段（适用于 Chrome）：
<head>
<style type="text/css">
html
{
width: 100%;
height: 100%;
}
body
{
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
This is text!
</body>
For more details, please refer to the article.
欲知更多详情，请参阅文章。
回答by gonzohunter
To centre align a div you should apply the style
要居中对齐 div，您应该应用样式
div
{
margin: 0 auto;
}
回答by threadhack
<div align="center">
or
或者
<div style="margin: 0 auto;">
