Center header element with position fixed to top of page [duplicate]

问题

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.

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.

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

.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;

}

回答1:

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:

<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.wrapper block to define a context for the layout, which has some padding equal to the expected height of the header.

The div.header block contains an image (200x100 px), and div.content holds various text paragraphs.

The layout and styling is defined in the following 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 .header style declares a height and width, and uses position: fixed to pin the position of the element to the view port. For positioning, top: 0 places the header to the top of the page.

To center the element, set left: 0 and right: 0 and use 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.

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.

Fiddle: http://jsfiddle.net/audetwebdesign/q2WRv/

回答2:

Source: 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

<body>
<div class="header_p1"><img src="header.png"/></div></center>

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 */
}

回答3:

Orignally taken from here In 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:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

来源：https://stackoverflow.com/questions/16251674/center-header-element-with-position-fixed-to-top-of-page

标签

html

css

position