Unable to center div horizontally, position fixed involved

Question

I have a div that I want to center horizontally inside my browser window without changing the vertical position. Here's my div:

<div id="divErrorMessage" class="ErrorClientSide">
    <div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
    <div id="divErrorMessageText" style="margin-left: 6px;margin-top: 2px;">{ERROR MESSAGE HERE}</div>
    <img src="./Images/Icons/tinyx.png" style="position: absolute; top: 4px; right:4px; cursor:pointer" onclick="closeErrorMessage();" />
</div>

And here's the class:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 370px;
  padding: 10px 25px 10px 25px;
  border-radius: 7px;
}

Note: I removed the color styles and such from the class above for brevity.

Try it out here. Instructions: Leave all boxes blank and just click the Next >> button. You should see a pink error message div appear at the top that says "Error: All fields are required.", but the horizontal positioning is way off.

Problem: I cannot center divErrorMessage horizontally in my browser window. I'm pretty sure that position:fixed is the problem, but if I remove that, my div disappears and I can't find it. left:370px is clearly a problem as well. If I remove that, the div aligns at the left of the browser and I can't find any way to center it.

Here are my only positioning requirements for this div:

It needs to be positioned vertically a little below the brown header at the top.
It needs to be horizontally centered in the browser window.

If CSS can't do this easily I would be happy for a jquery solution as well, but I'm guessing this should be easy with CSS.

Important note: The error message div and much of the content is inside an iFrame.

Will that div have a fixed width? – j08691 Mar 27 '15 at 15:53 — j08691, Mar 27 '15 at 15:53

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

If the absolutely positioned error box doesn't have a fixed width, you could achieve the horizontal alignment by a combination of left: 50%; and transform: translateX(-50%);.

For instance:

.ErrorClientSide {
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

Vendor prefixes omitted due to brevity.

It's worth noting that translate transform is supported in IE9+. For further reading you could refer to the topic below:

How to center a "position: absolute" element

edited May 23 '17 at 12:06

Community

1
1

answered Mar 27 '15 at 15:55

Hashem Qolami

97,268
26
150
164

1

I like your answer if position must be fixed and no width - but I'm sort of wondering why there's a need for the position to be fixed in this case. – Mia Sno Mar 27 '15 at 16:00
@MiaSno `fixed` value? it is not a must. As I noted, it works for *absolutely positioned* elements which includes elements with both `absolute` or `fixed` positioning values. Also it may work for `relative` positioning as well but if I remember correctly, Firefox has an issue where the parent element doesn't have an explicit `width` which is needed for percentage value on `left` to work. – Hashem Qolami Mar 27 '15 at 16:04

Mia Sno · Answer 2 · 2015-03-27T16:00:54.913

0

it actually is located outside the form - which means it's falling in the DOM below the form if position is not fixed. If you want to not move it - you'll need a negative positioning top and a width sort of like this:

.ErrorClientSide {
display: block;
position: relative;
top: -319px;
width: 300px;
margin: 0 auto;
}

edited Mar 27 '15 at 16:00

answered Mar 27 '15 at 15:55

Mia Sno

947
1
6
13

score 0 · Answer 3 · answered Mar 27 '15 at 15:56

As your error div is using a fixed position, you should change its left and margin-left position accordingly.

Let's suppose this error div will have a width of 200px, you could adjust your CSS with the following change:

 .ErrorClientSide {
    left: 50%;
    margin-left: -100px;
 }

Your margin-left attribute should be the negation of half your div's width (for instance, if your div's width is 378px instead of 200px, you should use margin-left: -189px;).

vitdes · Answer 4 · 2015-03-27T16:07:14.190

0

Lets say your div has width: 100px, then you can do left: 50%; margin-left: -50px;

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

Alternatively you can do:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

This centre you div inside window

edited Mar 27 '15 at 16:07

answered Mar 27 '15 at 15:56

vitdes

124
1
12

score 0 · Answer 5 · answered Mar 27 '15 at 16:01

0

Remove position, top and left and use margin: 0 auto and width. Modify the markup to put divErrorMessage before the form. Or wrap it with an absolute position div then center it inside of that.

But first, please don't use <center> as it's been deprecated.

answered Mar 27 '15 at 16:01

Francis Nepomuceno

4,935
4
29
35

This is basically what most would do - but sometimes people are working in a structure they can't change. – Mia Sno Mar 27 '15 at 16:18

score -2 · Answer 6 · edited May 23 '17 at 12:06

-2

If you want to position a DIV vertically and horizontally you have to wrap it in 3 divs.

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>
</div>
</div>

CSS

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto; 
width: /*whatever width you want*/;
}

I pulled this answer from How to vertically center a div for all browsers?

edited May 23 '17 at 12:06

Community

1
1

answered Mar 27 '15 at 15:53

Joey Fuller

1
3

Ahh sorry I did in fact misread. Thats what I get got staying up too late. – Joey Fuller Mar 29 '15 at 00:55

Unable to center div horizontally, position fixed involved

6 Answers6