Centering an absolute positioned box in a responsive site

Question

I am trying to center an absolute positioned logo and other elements to follow inside a 100% width header.

What is the procedure for centering an absolute positioned item and ensuring it and the other elements I will add stay centered as they move from 320px to 475px.

Here is the code below I have so far, it is centered at 320px but doesn't remain centered as I expand the page:

@media (max-width: 475px) and (min-width: 320px)
#header {
height: 170px;
width: 100%!important;
position:relative;
}

#logo
left: 21%;
top: -7px;
position: absolute;
}

Why are you using absolute positioning? What does your HTML look like? — Marc Audet, Nov 25 '15 at 11:55

score 1 · Answer 1 · answered Nov 25 '15 at 12:10

1

Another option would be using relative position and and margin: 0 auto; instead of absolute and a percentage in left;

logo{

margin: 0 auto;
position: relative;

}

here is a working example: http://jsfiddle.net/3yLd2n5q/

hope it helps

answered Nov 25 '15 at 12:10

Luis Joglar

31
2

The question states "an absolute positioned logo"... – Vi100 Nov 25 '15 at 12:26
Just giving options... – Luis Joglar Nov 25 '15 at 12:31
Thanks, I'll give it a try. I can never decipher when margin : 0 auto will work and when it won't! – Molder Nov 25 '15 at 13:19

Andy Furniss · Answer 2 · 2015-11-25T12:00:37.387

Not sure you even need media queries for this.

How about something like this? Wrapping your logo and any other content you want centered in a inline-block div and setting the header container to text-align:center.

.header {
    height:100px;
    background-color:grey;
    text-align:center;
}

.logo {
    display:inline-block;
    width:100px;
    height:100px;
    background-color:blue;
}

<div class="header">
    <div class="logo"></div>
</div>

...or, if you only needed some bits centered and others not:

.header {
    position:relative;
    height:100px;
    background-color:grey;
}

.content {
    position:absolute;
    height:80px;
    padding:10px;
    text-align:center;
}

.left {    
    left:0;
    background-color:red;
}

.center {
    left:50%;
    transform:translateX(-50%);
    background-color:blue;
}

.right {
    right:0;
    background-color:red;
}

<div class="header">
    <div class="content left">Left</div>
    <div class="content center">Centered</div>
    <div class="content right">Right</div>
</div>

score 0 · Answer 3 · answered Nov 25 '15 at 12:06

0

If you don't have to support old browsers and you don't mind to use CSS3 then you can use this in your .logo class:

left: calc(50% - XXXpx);

where XXX should be half of the width of your logo

answered Nov 25 '15 at 12:06

Vi100

4,080
1
27
42

This is lookign pretty good so far, it is a general ecommerce site so there are some old browsers in there. Thought there might be a stock easy way to center absolute content, but obviously not. – Molder Nov 25 '15 at 12:10
By now this is vastly supported, but if you're concerned about it you can check the compatibility list of calc here: http://caniuse.com/#search=calc – Vi100 Nov 25 '15 at 12:13
The old Android browser lack of support is a worry, but otherwise this works great even on the following elements I have added – Molder Nov 25 '15 at 12:19
You can use a fallback and align it to the "left: 0px" for example, for old browsers, just put it before the other "left: calc...". Well, it's up to you. And, if you are glad with my answer, please check it as correct ;-) – Vi100 Nov 25 '15 at 12:24

score 0 · Answer 4 · answered Nov 25 '15 at 12:15

Use the absolutely positioned element as a container for your logo and other elements.

To center the container:

top:50%; 
left: 50%; 
transform: translate(-50%, -50%);

Then set text-align to centre to centre elements inside the container.

Here's a fiddle - http://jsfiddle.net/0a70ccz1/

Centering an absolute positioned box in a responsive site

4 Answers4

logo{