How can I center a div within another div?
You need to set the width
of the container (auto
won't work):
#container {
width: 640px; /* Can be in percentage also. */
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
The CSS reference by MDN explains it all.
Check out these links:
- auto - CSS reference | MDN
- margin - CSS reference | MDN
- What is the meaning of
auto
value in a CSS property - Stack Overflow
In action at jsFiddle.
What is the best way to center a div inside another div?
Here's some ideas of how you can achieve it.
https://codepen.io/Warisara-L/pen/wOMxwR
// HTML
<div class="wrapper" id="solution-1">
<div class="inner">1</div>
</div>
// SCSS
#solution-1 {
display: grid;
.inner {
margin: auto;
}
}
#solution-2 {
display:flex;
justify-content: center;
align-items: center;
}
#solution-3 {
position: relative;
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
#solution-4 {
display: flex;
.inner {
margin: auto;
}
}
#solution-5 {
display: grid;
justify-content: center;
align-items: center;
}
#solution-6 {
position: relative;
.inner {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
#solution-7 {
height: 120px;
line-height: 120px;
text-align: center;
.inner {
display: inline-block;
vertical-align: middle;
}
}
#solution-8 {
display: flex;
.inner {
align-self: center;
margin: 0 auto;
}
}
Have a good day sir :)
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 a div inside another div
If the two divs got fixed dimensions, you can simply put a margin on the second div. In your case :
#div2 {
margin: 25px;
}
Or, if the divs got variable dimensions, try :
#div1 {
position: relative;
}
#div2 {
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
OR :
#div1 {
text-align: center;
}
#div2 {
display: inline-block;
vertical-align: middle;
}
That's all the way I know to achieve that :)
Centering floating divs within another div
First, remove the float
attribute on the inner div
s. Then, put text-align: center
on the main outer div
. And for the inner div
s,
use display: inline-block
. Might also be wise to give them explicit widths too.
<div style="margin: auto 1.5em; display: inline-block;">
<img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
<br/>
Nadia Bjorlin
</div>
How can I horizontally center an element?
You can apply this CSS to the inner <div>
:
#inner {
width: 50%;
margin: 0 auto;
}
Of course, you don't have to set the width
to 50%
. Any width less than the containing <div>
will work. The margin: 0 auto
is what does the actual centering.
If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:
#inner {
display: table;
margin: 0 auto;
}
It will make the inner element center horizontally and it works without setting a specific width
.
Working example here:
#inner {
display: table;
margin: 0 auto;
border: 1px solid black;
}
#outer {
border: 1px solid red;
width:100%
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Center absolute div in another div
The easy way to vertically and horizontally center a div into another goes like this:
.container { position: relative; width: 100px; /* not part of solution */ height: 100px; /* not part of solution */ background-color: #808; /* not part of solution */ border-radius: 50%; /* not part of solution */}.content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; /* not part of solution */}
<div class="container"> <div class="content">I'm absolutly centered</div></div>
Related Topics
Center HTML Input Text Field Placeholder
Xpath Testing That String Ends with Substring
How to Center the Contents of an HTML Table
How to Justify a Horizontal List
How to Show Multiline Text in a Table Cell
Disable Form Autofill in Chrome Without Disabling Autocomplete
Is It Alright to Use Multiple H1 Tags on the Same Page, But Style Them Differently
Is It Ok to Use a Self Closing Div Tag
Should the HTML Anchor Tag Honor the Disabled Attribute
Hover Effects Not Working with IE8
Height Percentage Not Working in CSS
Why Do I Need a Doctype? (What Does It Do)
How to Show Dots ("...") in a Span with Hidden Overflow
Why Do My List Item Bullets Overlap Floating Elements
Why Does Flexbox Stretch My Image Rather Than Retaining Aspect Ratio