I've seen a million questions about how to center a block element and there seem to be a couple popular ways to do it, but they all rely on fixed pixels widths. Then either margin:0 auto or with absolute/relative positioning and left:50%; margin-left:[-1/2 width]; etc. We all know this can't work if the element has a width set in %.
Is there really no way to do this in a way that is truly fluid? I'm talking about using % for width (not setting a dozen media queries with increasingly small fixed widths).
Beware: there are tons of solutions out there which use the buzz word "responsive" but don't answer my question (because they use fixed widths anyway). Here's an example.
Update: I almost forgot: how do you handle limiting the max-width of the centered element and still keep it in the center? See my comment under @smdrager's answer. Real-life example. I want a pop-up message or a light box effect containing a paragraph of text to appear centered in the window and the text to wrap fluidly depending on the width. But I don't want the text box to stretch out toooo far where the text would get difficult to read (imagine a 4ft screen with three paragraphs stretched out onto a single line of text). If you add a max-width to most approaches, the centered box will stop centering when the max-width is reached.
This question is related to
html
css
responsive-design
From Chris Coyier's article on centering percentage width elements:
Instead of using negative margins, you use negative
translate()transforms.
.center {
position: absolute;
left: 50%;
top: 50%;
/*
Nope =(
margin-left: -25%;
margin-top: -25%;
*/
/*
Yep!
*/
transform: translate(-50%, -50%);
/*
Not even necessary really.
e.g. Height could be left out!
*/
width: 40%;
height: 50%;
}
Something like this could be it?
<div class="random">
SOMETHING
</div>
body{
text-align: center;
}
.random{
width: 60%;
margin: auto;
background-color: yellow;
display:block;
}
DEMO: http://jsfiddle.net/t5Pp2/2/
Edit: adding display:block doesn't ruin the thing, so...
You can also set the margin to: margin: 0 auto 0 auto; just to be sure it centers only this way not from the top too.
I think you can use display: inline-block on the element you want to center and set text-align: center; on its parent. This definitely center the div on all screen sizes.
Here you can see a fiddle: http://jsfiddle.net/PwC4T/2/ I add the code here for completeness.
HTML
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
CSS
#container
{
text-align: center;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
For vertical centering, I "dropped" support for some older browsers in favour of display: table;, which absolutely reduce code, see this fiddle: http://jsfiddle.net/jFAjY/1/
Here is the code (again) for completeness:
HTML
<body>
<div id="table-container">
<div id="container">
<div id="main">
<div id="somebackground">
Hi
</div>
</div>
</div>
</div>
</body>
CSS
body, html
{
height: 100%;
}
#table-container
{
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container
{
display: table-cell;
vertical-align: middle;
}
#main
{
display: inline-block;
}
#somebackground
{
text-align: left;
background-color: red;
}
The advantage of this approach? You don't have to deal with any percantage, it also handles correctly the <video> tag (html5), which has two different sizes (one during load, one after load, you can't fetch the tag size 'till video is loaded).
The downside is that it drops support for some older browser (I think IE8 won't handle this correctly)
This might sound really simplistic...
But this will center the div inside the div, exactly in the center in relation to left and right margin or parent container, but you can adjust percentage symmetrically on left and right.
margin-right: 10%;
margin-left: 10%;
Then you can adjust % to make it as wide as you want it.
EDIT :
http://codepen.io/gcyrillus/pen/daCyu
So for a popup, you have to use position:fixed , display:table property and max-width with em or rem values :)
with this CSS basis :
#popup {
position:fixed;
width:100%;
height:100%;
display:table;
pointer-events:none;
}
#popup > div {
display:table-cell;
vertical-align:middle;
}
#popup p {
width:80%;
max-width:20em;
margin:auto;
pointer-events:auto;
}
Source: Stackoverflow.com