Center header element with position fixed to top of page

 

This question already has an answer here:

  • Center a position:fixed element 11 answers

    • 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/

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

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

    链接地址: http://www.djcxy.com/p/75796.html

    上一篇: 如何在位置固定的情况下在中心设置图像

    下一篇: 位置固定在页面顶部的中心标题元素