Html 位置固定在页面顶部的中心标题元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16251674/
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
Center header element with position fixed to top of page
提问by The Mechanic
I have an CSS issue specific to Google Chrome. I've done some research but nobody knows how to fix it without Javascript, which I do not want to use because my element will change in the future.
我有一个特定于 Google Chrome 的 CSS 问题。我做了一些研究，但没有人知道如何在没有 Javascript 的情况下修复它，我不想使用它，因为我的元素将来会发生变化。
The code is below, if you use it you will see the that the child div goes to the right hand side of the page and if I add the same top an position values to the parents it moves in the opposite direction.
代码在下面，如果你使用它，你会看到子 div 转到页面的右侧，如果我向父级添加相同的顶部和位置值，它会向相反的方向移动。
The website will have a lot more content, and I want a centered header where the sidebar and the floated content will disappear behind as you scroll through the page.
该网站将有更多内容，我想要一个居中的标题，当您滚动页面时，侧边栏和浮动内容将消失在后面。
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
and the css is
和CSS是
.header_p1
{
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
}
.header_p1_child
{
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
}
回答by Marc Audet
You want a centered header fixed to the top of the page such that for longer pages, the content will scroll vertically beneath the header.
您希望将居中的标题固定在页面顶部，以便对于较长的页面，内容将在标题下方垂直滚动。
Here is the prototype HTML snippet:
这是原型 HTML 片段：
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
I created a div.wrapperblock to define a context for the layout, which has some padding equal to the expected height of the header.
我创建了一个div.wrapper块来定义布局的上下文，它的一些填充等于标题的预期高度。
The div.headerblock contains an image (200x100 px), and div.contentholds various text paragraphs.
该div.header块包含一个图像（200x100 像素），并div.content包含各种文本段落。
The layout and styling is defined in the following CSS:
布局和样式在以下 CSS 中定义：
.wrapper {
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
}
.header {
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
}
img.banner {
display: block;
margin: 0 auto;
}
The .headerstyle declares a height and width, and uses position: fixedto pin the position of the element to the view port. For positioning, top: 0places the header to the top of the page.
该.header样式声明了高度和宽度，并用于position: fixed将元素的位置固定到视口。对于定位，top: 0将页眉放在页面顶部。
To center the element, set left: 0and right: 0and use margin: 0 auto.
要居中的元素，被设置left: 0和right: 0和使用margin: 0 auto。
Within div.header, you can declare the image to be a block type element and then center it by using margin: 0 auto.
在 中div.header，您可以将图像声明为块类型元素，然后使用 将其居中margin: 0 auto。
I checked this both in Firefox and Chrome and it works as expected. This relies on CSS 2.1 so it should work in quite a few older browsers, perhaps IE7, but I did not test it, but perhaps someone can do so and comment accordingly.
我在 Firefox 和 Chrome 中都检查了这个，它按预期工作。这依赖于 CSS 2.1，所以它应该可以在相当多的旧浏览器中工作，也许是 IE7，但我没有测试它，但也许有人可以这样做并相应地发表评论。
回答by dtech
Source: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
来源：http: //css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
DO NOT USE <center>tag, this is outdated and should be done with CSS
不要使用<center>标签，这是过时的，应该用 CSS 来完成
<body>
<div class="header_p1"><img src="header.png"/></div></center>
CSS
CSS
.header_p1
{
background: white;
width: 750px;
height: 110px;
padding-bottom: 10px;
position: fixed;
top: 0;
left: 50%; /* Start at 50% of browser window */
margin-left: -325px; /* Go half of width to the left, centering the element */
}
回答by The Mechanic
Orignally taken from hereIn order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
Orignally 从这里获取为了使图像完全居中，只需应用图像高度一半的负上边距和图像宽度一半的负左边距。对于这个例子，像这样：
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
