CSS how to position an element in a middle (half height / vertical 50%) of another element
This is pretty late but I tried to make an example on codepen which shows a working example if I understood your question correctly.
http://codepen.io/trgraglia/pen/RWbKyj
Use CSS transform.
For example, transform:translateX(-50%);
, will move an element left by 50% of ITSELF. Now you can align it to the parent with position
and bottom
or top
or left
or right
and then move it by the dimensions of itself.
Hope this helps!
Positioning div element at center of screen
The easy way, if you have a fixed width and height:
#divElement{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Please don't use inline styles! Here is a working example http://jsfiddle.net/S5bKq/.
Positioning a div relative to its vertical centre
In the snippet bellow I have two elements, both set to position:absolute
with top: 25%
and left: 50%
.
.element
astransform: translate(-50%, -50%);
that allows him to center vertically and horizontally "exactly" at 25% of the page dimensions (height, width). Because unliketop
andleft
, thetransform
property is based on the size of the target element. So the percentage you set refers to the size of the bounding box of the target..other
in the other hand doesn't have atransform
rule so it's not positioned like you wanted it to be, its top border sits at 25%
.element,.other { position: absolute; text-align: center; top: 25%; left: 50%;}
.element { transform: translate(-50%, -50%); color: green;}
.other { color: red;}html,body{ height:100%; margin:0; padding:0;}
<div class="element">I'm at 25% middle</div><div class="other">I'm not at 25% middle</div>
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 center an element horizontally and vertically
Approach 1 -
transform
translateX
/translateY
:
Example Here / Full Screen Example
In supported browsers (most of them), you can use top: 50%
/left: 50%
in combination with translateX(-50%) translateY(-50%)
to dynamically vertically/horizontally center the element.
.container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<span>I'm vertically/horizontally centered!</span>
</div>
How to vertically center content with variable height within a div?
Just add
position: relative;
top: 50%;
transform: translateY(-50%);
to the inner div.
What it does is moving the inner div's top border to the half height of the outer div (top: 50%;
) and then the inner div up by half its height (transform: translateY(-50%)
). This will work with position: absolute
or relative
.
Keep in mind that transform
and translate
have vendor prefixes which are not included for simplicity.
Codepen: http://codepen.io/anon/pen/ZYprdb
How to align a div to the middle (horizontally/width) of the page
<body>
<div style="width:800px; margin:0 auto;">
centered content
</div>
</body>
How can I center text (horizontally and vertically) inside a div block?
If it is one line of text and/or image, then it is easy to do. Just use:
text-align: center;
vertical-align: middle;
line-height: 90px; /* The same as your div height */
That's it. If it can be multiple lines, then it is somewhat more complicated. But there are solutions on http://pmob.co.uk/. Look for "vertical align".
Since they tend to be hacks or adding complicated divs... I usually use a table with a single cell to do it... to make it as simple as possible.
Update for 2020:
Unless you need make it work on earlier browsers such as Internet Explorer 10, you can use flexbox. It is widely supported by all current major browsers. Basically, the container needs to be specified as a flex container, together with centering along its main and cross axis:
#container {
display: flex;
justify-content: center;
align-items: center;
}
To specify a fixed width for the child, which is called a "flex item":
#content {
flex: 0 0 120px;
}
Example: http://jsfiddle.net/2woqsef1/1/
To shrink-wrap the content, it is even simpler: just remove the flex: ...
line from the flex item, and it is automatically shrink-wrapped.
Example: http://jsfiddle.net/2woqsef1/2/
The examples above have been tested on major browsers including MS Edge and Internet Explorer 11.
One technical note if you need to customize it: inside of the flex item, since this flex item is not a flex container itself, the old non-flexbox way of CSS works as expected. However, if you add an additional flex item to the current flex container, the two flex items will be horizontally placed. To make them vertically placed, add the flex-direction: column;
to the flex container. This is how it works between a flex container and its immediate child elements.
There is an alternative method of doing the centering: by not specifying center
for the distribution on the main and cross axis for the flex container, but instead specify margin: auto
on the flex item to take up all extra space in all four directions, and the evenly distributed margins will make the flex item centered in all directions. This works except when there are multiple flex items. Also, this technique works on MS Edge but not on Internet Explorer 11.
Update for 2016 / 2017:
It can be more commonly done with transform
, and it works well even in older browsers such as Internet Explorer 10 and Internet Explorer 11. It can support multiple lines of text:
position: relative;
top: 50%;
transform: translateY(-50%);
Example: https://jsfiddle.net/wb8u02kL/1/
To shrink-wrap the width:
The solution above used a fixed width for the content area. To use a shrink-wrapped width, use
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Example: https://jsfiddle.net/wb8u02kL/2/
If the support for Internet Explorer 10 is needed, then flexbox won't work and the method above and the line-height
method would work. Otherwise, flexbox would do the job.
Related Topics
CSS Background-Position Animate Right to Left
How to Detect Firefox Users in Pure CSS
What Are The Best Practices for Writing Maintainable CSS
Does The Shadow Dom Replace: :Before and: :After
Line Two Divs Side by Side with CSS and React
CSS Horizontal Navigation Spacing
Rotating Glyphicons/Font Awesome in Bootstrap
How to Move Bootstrap 3 Carousel Caption Below Images
Make Sidebarpanel Autoscroll with Mainpanel in Shiny
What Are The Risks Associated with Using Inline Styles
Google Map V3 Initializing with Horizontal Gray Line W/ Foundation in Chrome
What Is a Good CSS Cleanup Tool
How to Make a CSS Triangle Background on a Div Without Using Border and Image