center div with position absolute

[dynamyc]

I have this markup for example :

----some content----

and this css:

#container {

position:relative;

width:100%;

}

#search {

position:absolute;

top:0;

left:50%;

}

Am I forced to define the width of container in pixels to make the search be in the middle of the screen, because I want to be centered for almost every desktop resolutions?

[joshuanhibbert]

https://css-tricks.com/14745-centering-in-the-unknown/

[poonu]

use this trick

.div-abc {position:absolute;

z-index:1;

width:500px; height:500px; background:#666; border:solid 1px #333;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

left:50%;

margin-left:-250px;

}

[jamygolden]

The div must have a fixed size to center an absolute div ( without js )

[joshuanhibbert]

@jamy_za that depends on if you need it to work in IE7 or not. The link I posted above shows a solution that doesn’t require a fixed width.

[dynamyc]

Oh yeah, this is the answer I was looking for, many thanks.
But now I have another issue, I can’t center some thumbnails vertically.
I’ve tried to use : vertical-align: middle; but with no success.

Markup for this is:

.................

and this css:

.jThumbnailScroller#tS1{

position:relative;

width:100%;



}

.jThumbnailScroller .jTscrollerContainer{position:absolute;}

.jThumbnailScroller .jTscroller{position:relative; height:100%; margin:0; left:0; top:0; display:inline-block; *display:inline;}

.jThumbnailScroller{

position:relative;

width:800px;

height:255px; /*changed 255px set it if you change #tt margin-top value*/

margin:0;

padding:0;

overflow:hidden;

}

[joshuanhibbert]

I’m not sure exactly what you’re trying to do, but looking at the markup on this page might help: http://joshnh.com/lab/

[connorgaughan]

Based on your original post this [Pen might come in handy](http://codepen.io/connorgaughan/pen/gHqtl “CodePen”). Essentially you center the absolutely positioned div by defining a width by % not px. Using the box-model idea you split the difference from 100 and apply it to left and right.

[Author]

Posts