如何<div>在浏览器窗口(不是页面,而不是屏幕)的中间放置一些HTML元素(例如,a )？不依赖于浏览器窗口大小,屏幕分辨率,工具栏布局等.例如,我希望它位于浏览器窗口的中间.
Pat*_*and 37
要做到这一点,您需要知道您居中的元素的大小.任何测量都可以(即px,em,百分比),但它必须具有固定的大小.
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;
}
编辑:此中心位于视口中.您只能使用JavaScript在浏览器窗口中居中.但无论如何,这可能还不错,因为你可能想要显示一个弹出/模态框？
Sam*_*our 18
div#wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Cug*_*uga 12
这完全可以用CSS - 不需要JavaScript: 这是一个例子
以下是该示例背后的源代码:
<!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>
Del*_*tev 10
这是:
这个例子:
<!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>
请查看原始网址以获取完整信息:http: //krustev.net/html_center_content.html
您可以使用此代码执行任何操作.唯一的条件是任何派生的作品必须具有对原作者的引用.
小智 8
如果您不知道浏览器的大小,可以使用以下代码简单地居中于CSS:
HTML代码:
<div class="firstDiv">Some Text</div>
CSS代码:
.firstDiv {
width: 500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #F1F1F1;
}
这也有助于未来任何不可预见的变化.
我在居中和对齐方面遇到了很多问题，直到我在指南中发现 Flexbox 作为推荐。
为了方便起见，我将在这里发布一个片段（适用于 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>
欲了解更多详情，请参阅文章。
<div align="center">
或者
<div style="margin: 0 auto;">
这适用于任何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>flex 在此处查看更多详细信息。这应该适用于大多数浏览器，请参阅此处的兼容性列表。