CSS: Vertically align div when no fixed size of the div is known
This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.
The solution is based on vertical-align: middle
in conjunction with line-height: 0
, which parent has a fixed line-height.
The HTML:
<span id="center">
<span id="wrap">
<img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" />
</span>
</span>
And the CSS:
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
#center {
position: relative;
display: block;
top: 50%;
margin-top: -1000px;
height: 2000px;
text-align: center;
line-height: 2000px;
}
#wrap {
line-height: 0;
}
#wrap img {
vertical-align: middle;
}
Tested on Win7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.
The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:
<span id="center">
<span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="Sample Image" /></span>
</span>
Note that the span's are also required for IE7. In every other browser, the span's may be div's.
Vertical align div to unknown height div without affecting horizontal centering
You should use display: flex
and align-items
, its also important to pass a min-height to your container.
I have created a quick fiddle to explain what I understood from you.
Take a look at this (JSFiddle):
.container { width: 300px; padding-bottom: 20px; padding-top: 20px; border: solid 1px red; display: flex; align-items: center; justify-content: center; min-height: 30px;}
.inner { background: rgba(0, 0, 0, 0.5); width: 50%;}
.fixed { position: fixed; left: 20px; border: solid 1px blue; height: 30px;}
<div class="container"> <div class="inner"> Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum Lorem Ipsum Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum </div> <div class="fixed"> fixed </div></div>
Vertical alignment without knowing height in CSS?
Use padding top , padding bottom to center elements vertically , with or without height definitions ...
css vertically centering a fixed positioning div
Alternatively, you could try this (only works if you know the height of the image):
#image{
position:relative;
height:600px;
top: 50%;
margin-top: -300px; /* minus half the height */
border:1px solid grey;
}
How can I vertically align elements in a div?
Wow, this problem is popular. It's based on a misunderstanding in the vertical-align
property. This excellent article explains it:
Understanding vertical-align
, or "How (Not) To Vertically Center Content" by Gavin Kistner.
“How to center in CSS” is a great web tool which helps to find the necessary CSS centering attributes for different situations.
In a nutshell (and to prevent link rot):
- Inline elements (and only inline elements) can be vertically aligned in their context via
vertical-align: middle
. However, the “context” isn’t the whole parent container height, it’s the height of the text line they’re in. jsfiddle example - For block elements, vertical alignment is harder and strongly depends on the specific situation:
- If the inner element can have a fixed height, you can make its position
absolute
and specify itsheight
,margin-top
andtop
position. jsfiddle example - If the centered element consists of a single line and its parent height is fixed you can simply set the container’s
line-height
to fill its height. This method is quite versatile in my experience. jsfiddle example - … there are more such special cases.
- If the inner element can have a fixed height, you can make its position
Vertically centering a div inside another div
tl;dr
Vertical align middle works, but you will have to use table-cell
on your parent element and inline-block
on the child.
This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.
The classic solution (table layout)
This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.
Here is an example
Tested in:
- FF3.5+
- FF4+
- Safari 5+
- Chrome 11+
- IE9+
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Modern solution (transform)
Since transforms are fairly well supported now there is an easier way to do it.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
Demo
♥ my favourite modern solution (flexbox)
I started to use flexbox more and more its also well supported now Its by far the easiest way.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
Demo
More examples & possibilities:
Compare all the methods on one pages
How to set div in center vertically and horizontally where height is not known?
it is not possible to vertically center a block with this technique, only horizontal centering is allowed
try this css code to get a vertical and horizontal centering:
login-form {
width: 35%;
margin: auto;
margin-top: 50vh; /*allow us to push the login-form into the half of the viewport */
transform: translateY(-50%);
/the login-form will shoot the half of his own height/
}
hope this will work for you
good luck
Related Topics
Change Cursor Type on Input Type="File"
Adding HTML Class Tag Under ≪Option≫ in Html.Dropdownlist
Youtube Embedded Video: Autoplay Feature Not Working in Iphone
Problem with <Select> and :After with CSS in Webkit
Assign an Initial Value to Radio Button as Checked
What Are the Allowed Tags Inside a ≪Li≫
How to Run an External Program, E.G. Notepad, Using Hyperlink
How to Remove a Div But Keep Its Elements
Scale Image to Fit a Bounding Box
Are Empty HTML5 Data Attributes Valid
How to Make Bootstrap 3 Fluid Layout Without Horizontal Scrollbar
Best Way to View Generated Source of Webpage
Borders Disappear in Chrome When I Zoom In