How to center contents of an absolute div horizontally

Question

I'm using font awesome library. I would like to put horizontally center the Arrow icon. And DIVs must be absolute position.

I use this code but it doesn't work.

.arrow {
   left: 0;
   right: 0;
}

JSFiddle Demo

possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — gvee, Sep 05 '14 at 10:52
Move `left: 0; right: 0;` to the parent div which is positioned absolutely. — Hashem Qolami, Sep 05 '14 at 10:53
If you really want the parent `div` to be absolute, then give it an appropriate width. Technically, the arrow is centered already, because you gave the parent `div` `text-align:center;`. — bzeaman, Sep 05 '14 at 10:54
@gvee The title is misleading, the question is not really about centering an `absolute` positioned div, but its contents. — Hashem Qolami, Sep 05 '14 at 11:19

score 3 · Accepted Answer · edited Sep 05 '14 at 11:00

3

Use width:100% in absolute div

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
    width:100%;
}

Updated fiddle

edited Sep 05 '14 at 11:00

Weafs.py

22,731
9
56
78

answered Sep 05 '14 at 10:54

Roy Sonasish

4,571
20
31

I forgot only "width:100%" . Thank you so much :) – mehmetdemiray Sep 05 '14 at 12:14

score 2 · Answer 2 · answered Sep 05 '14 at 10:58

Here is working example. You can delete .arrow css rule because it does nothing.

.home {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: relative;
    margin: 0 auto;
    max-width: 960px;
}

.home .center {
    position: absolute;
    width: 100%;
    bottom: 0;
    top:30px;
    text-align: center;
}

Manisha Patel · Answer 3 · 2014-09-05T11:05:13.540

1

Try this:

HTML Code:

<div class="home">
   <div class="center">
     <a class="arrow fa fa-long-arrow-down fa-3x" href="#"></a>
  </div>
</div>

CSS code:

.home {
     margin: 0 auto;
     height: 100%;
     width: 100%;
     position: relative;
     margin: 0 auto;
     max-width: 960px;
 }

.home .center {
    position: absolute;
    bottom: 0;
    top:30px;
    text-align: center;
}

.arrow {    
}

edited Sep 05 '14 at 11:05

answered Sep 05 '14 at 10:56

Manisha Patel

354
2
12

`position: fix;` huh?! I guess you meant `fixed`. – Hashem Qolami Sep 05 '14 at 10:57
.home is relative. it must be absolutely positioned. I solved problem. Thank you :) – mehmetdemiray Sep 05 '14 at 12:09

Memphistoles · Answer 4 · 2014-09-05T11:02:58.497

This should work,try it.

   .home {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    position: absolute;
    margin: 0 auto;
    max-width: 960px;
}

.center {
    position: relative;
    bottom: 0;
    top:30px;
    text-align: center;
}
.arrow
     left: 0;
    right: 0;

As an explanation why it works: well,the wrapper div must be absolute,and its content has to be relative to position what is inside of the wrapper as you please.In this way,will be easier for you if you want to add further relative divs

score 1 · Answer 5 · answered Sep 05 '14 at 11:00

1

I just changed into your CSS, and it works fine.

.home {
    margin: 0 auto;
 }

.home .center {
  margin: 0 auto;
  text-align: center;
}
.arrow
   margin: 0 auto;    
}

Cheers!

answered Sep 05 '14 at 11:00

Manish Shrivastava

30,617
13
97
101

How to center contents of an absolute div horizontally

5 Answers5