Center a fixed div with unknown width

Question

I have a div in body:

<div class="wrapper" style="position: fixed">
    <img src="#">
</div>

The <img> has its intrinsic width and height (and unknown). So how do I do to center the <div> in srceen (by CSS, not Jquery or Javascript)?

position: fixed can be omitted, did you try margin-left: auto; margin-right: auto;? — user3455395, Apr 21 '14 at 10:18
Is the div the same size as the image otherwise your question doesn't make sense? Also, center vertically or horizontally? — Paulie_D, Apr 21 '14 at 10:21

score 2 · Answer 1 · answered Apr 21 '14 at 10:40

2

Demo

css

img {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    background: #000;
}

answered Apr 21 '14 at 10:40

4dgaurav

11,360
4
32
59

score 0 · Answer 2 · answered Apr 21 '14 at 10:38

I suppose you want the .wrapper to have a fixed position because you want to have it as a header or footer. This makes it wrap to its contents, so you need to explicitly tell it to stretch to 100% width. Next, img are displayed inline. Therefore, to use the auto margin trick, you need to set its display to block:

.wrapper {
    position: fixed;
    width: 100%;
    background: lightblue;
}
img {
    display: block;
    margin: 0 auto;
}

Working jsfiddle here: http://jsfiddle.net/7swkv/

Center a fixed div with unknown width

2 Answers2