Trouble setting element vertically center

Question

I have an issue regarding the following CSS setting:

How to set an element vertically center?

.cycle-overlay { position:absolute; top:0; left:0; }

`center` is not a valid property value. https://developer.mozilla.org/en-US/docs/Web/CSS/top — Ming, Aug 19 '14 at 07:52
possible duplicate of [What's The Best Way of Centering a Div Vertically with CSS](http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css) — Mihey Egoroff, Aug 19 '14 at 07:56

score 2 · Accepted Answer · answered Aug 19 '14 at 08:20

2

The common way to do this is take the object to 50% from the top and then margin it 50% of the width of the object back:

.cycle-overlay{

 position: absolute;
 left: 0px;
width: 100%;

top: 50%;

height: (for example) 100px;

margin-top: (-height/2 that means:) -50px;

}

finaly if u want to have the DIV fixed at the position set the Position to absolute

answered Aug 19 '14 at 08:20

Dexkill

284
1
2
20

thanks for your answer but there is a problem in our situation that we can not fix height....so is there any alternative way to achieve this... – om_jaipur Aug 19 '14 at 09:11

score 1 · Answer 2 · answered Aug 19 '14 at 07:52

1

Use like this. You need to specify negative margin-top with half of your div height. Here i have assumed your div have a height of 200px.

.cycle-overlay { position:absolute; top:50%; left:0; margin-top:-100px; }

answered Aug 19 '14 at 07:52

Suresh Ponnukalai

13,820
5
34
54

score 0 · Answer 3 · answered Aug 19 '14 at 07:59

First of all you need to set height for a absolute positioned element to make it vertically align middle

.cycle-overlay{
   position:absolute;
   top:0;
   bottom:0;
   right:0;
   left:0;
   margin:auto;
   height:20px;
}

NOTE: TOP, LEFT, RIGHT and BOTTOM accepts only numeric values.

Trouble setting element vertically center

3 Answers3