How can I horizontally center a <div>
within another <div>
using CSS?
<div id="outer">
<div id="inner">Foo foo</div>
</div>
This will surely center your #inner
both horizontally and vertically. This is also compatible in all browsers. I just added extra styling just to show how it is centered.
#outer {
background: black;
position: relative;
width:150px;
height:150px;
}
#inner {
background:white;
position: absolute;
left:50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
But of course if you only want it horizontally aligned, This may help you.
#outer {
background: black;
position: relative;
width:150px;
height:150px;
}
#inner {
background:white;
position: absolute;
left:50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);
-moz-transform: translate(-50%,0);
-o-transform: translate(-50%,0);
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
.outer
{
background-color: rgb(230,230,255);
width: 100%;
height: 50px;
}
.inner
{
background-color: rgb(200,200,255);
width: 50%;
height: 50px;
margin: 0 auto;
}
<div class="outer">
<div class="inner">
margin 0 auto
</div>
</div>
Flexbox
#outer{
display: flex;
justify-content: center;
}
CSS grid
#outer {
display: inline-grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;
grid-gap: 3px;
}
You can solve the issue in many ways.
You can use CSS Flexbox.
#inner {
display: flex;
justify-content: center;
}
You can learn more about it on this link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
The easiest answer: Add margin:auto; to inner.
<div class="outer">
<div class="inner">
Foo foo
</div>
</div>
.outer{
width: 100%;
height: 300px;
background: yellow;
}
.inner{
width: 30%;
height: 200px;
margin: auto;
background: red;
text-align: center
}
Check my CodePen link: http://codepen.io/feizel/pen/QdJJrK
The best known way which is used widely and work in many browsers including the old ones, is using margin
as below:
#parent {
width: 100%;
background-color: #CCCCCC;
}
#child {
width: 30%; /* We need the width */
margin: 0 auto; /* This does the magic */
color: #FFFFFF;
background-color: #000000;
padding: 10px;
text-align: center;
}
<div id="parent">
<div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>
Run the code to see how it works. Also, there are two important things you shouldn't forget in your CSS when you try to center this way: margin: 0 auto;
. That makes it the div center as wanted. Plus don't forget width
of the child, otherwise it won't get centered as expected!
You can use the calc method. The usage is for the div you're centering. If you know its width, let's say it's 1200 pixels, go for:
.container {
width:1200px;
margin-left: calc(50% - 600px);
}
So basically it'll add a left margin of 50% minus half the known width.
Here is another way to center horizontally using Flexbox and without specifying any width to the inner container. The idea is to use pseudo elements that will push the inner content from the right and the left.
Using flex:1
on pseudo element will make them fill the remaining spaces and take equal size and the inner container will get centered.
.container {
display: flex;
border: 1px solid;
}
.container:before,
.container:after {
content: "";
flex: 1;
}
.inner {
border: 1px solid red;
padding: 5px;
}
<div class="container">
<div class="inner">
Foo content
</div>
</div>
We can also consider the same situation for vertical alignment by simply changing the direction of flex to column:
.container {
display: flex;
flex-direction: column;
border: 1px solid;
min-height: 200px;
}
.container:before,
.container:after {
content: "";
flex: 1;
}
.inner {
border: 1px solid red;
padding: 5px;
}
<div class="container">
<div class="inner">
Foo content
</div>
</div>
You can do it by using Flexbox which is a good technique these days.
For using Flexbox you should give display: flex;
and align-items: center;
to your parent or #outer
div element. The code should be like this:
#outer {
display: flex;
align-items: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
This should center your child or #inner
div horizontally. But you can't actually see any changes. Because our #outer
div has no height or in other words, its height is set to auto, so it has the same height as all of its child elements. So after a little of visual styling, the result code should be like this:
#outer {
height: 500px;
display: flex;
align-items: center;
background-color: blue;
}
#inner {
height: 100px;
background: yellow;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
You can see #inner
div is now centered. Flexbox is the new method of positioning elements in horizontal or vertical stacks with CSS and it's got 96% of global browsers compatibility. So you are free to use it and if you want to find out more about Flexbox visit CSS-Tricks article. That is the best place to learn using Flexbox in my opinion.
This worked for me:
#inner {
position: absolute;
margin: 0 auto;
left: 0;
width: 7%;
right: 0;
}
In this code, you determine the width of the element.
Try out this below CSS code:
<style>
#outer {
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
vertical-align: middle;
}
#outer > #inner {
display: inline-block;
font-size: 19px;
margin: 20px;
max-width: 320px;
min-height: 20px;
min-width: 30px;
padding: 14px;
vertical-align: middle;
}
</style>
Apply above CSS via below HTML code, to center horizontally and to center vertically (aka: align vertically in middle):
<div id="outer">
<div id="inner">
...These <div>ITEMS</div> <img src="URL"/> are in center...
</div>
</div>
After applying CSS & using above HTML, that section in webpage would look like this:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃V..Middle & H..Center ┣━1
┃ ┣━2
┃ ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
1 2 3 4 5
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┣━1
┃ V..Middle & H..Center ┣━2
┃ ┣━3
┗┳━━━━━━┳━━━━━━┳━━━━━━┳━━━━━━┳┛
1 2 3 4 5
So near to minimum CSS code are these:
<style>
#outer {
width: 100%;
text-align: center;
}
#outer > .inner2 {
display: inline-block;
}
</style>
Apply above CSS via below HTML code, to center (horizontally):
<div id="outer">
<img class="inner2" src="URL-1"> <img class="inner2" src="URL-2">
</div>
After applying CSS & using above HTML, that line in webpage would look like this:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━━━┑ ┃
┃│ img URL1 │ ┃
┃┕━━━━━━━━━━┙ ┃
┃┍━━━━━━━━━━┑ ┃
┃│ img URL2 │ ┃
┃┕━━━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━━━┑ ┍━━━━━━━━━━┑ ┣━1
┃ │ img URL1 │ │ img URL2 │ ┣━2
┃ ┕━━━━━━━━━━┙ ┕━━━━━━━━━━┙ ┣━3
┗┳━━━━━━━┳━━━━━━━┳━━━━━━━┳━━━━━━━┳┛
1 2 3 4 5
<style>
#outer {
width: 100%;
text-align: center;
}
#outer > img, #outer > div {
display: inline-block;
}
</style>
So above CSS can be applied like below, to center items (horizontally) inside the "outer" wrapper:
<div id="outer">
<img src="URL-1"> Text1 <img src="URL-2"> Text2
</div>
After applying CSS & using above HTML, that line in webpage would look like this:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL1 │ │img URL2│ ┣━2
┃ ┕━━━━━━━━━┙Text1┕━━━━━━━━┙Text2 ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
<style>
.outer2 {
width: 100%;
text-align: center;
}
.outer2 > div, .outer2 > div > img {
display: inline-block;
}
</style>
So above CSS can be applied like below, to center items (horizontally) inside the "outer2" wrapper:
<div class="outer2">
<div>
Line1: <img src="URL-1"> Text1 <img src="URL-2">
</div>
</div>
...
<div class="outer2">
<div>
Line2: <img src="URL-3"> Text2 <img src="URL-4">
</div>
</div>
After applying CSS & using above HTML, those lines in webpage would look like this:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL3│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL4│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL1│ │img URL2│ ┣━2
┃ Line1:┕━━━━━━━━┙Text1┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ │img URL3│ │img URL4│ ┣━2
┃ Line2:┕━━━━━━━━┙Text2┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
<style>
.outer2 {
width: 100%;
text-align: center;
vertical-align: middle;
}
.outer2 > div, .outer2 > div > img {
display: inline-block;
vertical-align: middle;
}
</style>
So above CSS can be applied like below, to center items horizontally and to vertically align in middle of the "outer2" wrapper:
<div class="outer2">
<div>
Line1: <img src="URL-1"> Text1 <img src="URL-2">
</div>
</div>
...
<div class="outer2">
<div>
Line2: <img src="URL-3"> Text2 <img src="URL-4">
</div>
</div>
After applying CSS & using above HTML, those lines in webpage would look like this:
BEFORE applying code:
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line1: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL1│ ┃
┃┕━━━━━━━━┙ ┃
┃Text1 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL2│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
........................
┏━━━━━━━━━━━━━━━━━━━━━━┓
┃Line2: ┃
┃┍━━━━━━━━┑ ┃
┃│img URL3│ ┃
┃┕━━━━━━━━┙ ┃
┃Text2 ┃
┃┍━━━━━━━━┑ ┃
┃│img URL4│ ┃
┃┕━━━━━━━━┙ ┃
┗━━━━━━━━━━━━━━━━━━━━━━┛
AFTER:
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ Line1:│img URL1│Text1│img URL2│ ┣━2
┃ ┕━━━━━━━━┙ ┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
.......................................
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃ ┍━━━━━━━━┑ ┍━━━━━━━━┑ ┣━1
┃ Line2:│img URL3│Text2│img URL4│ ┣━2
┃ ┕━━━━━━━━┙ ┕━━━━━━━━┙ ┣━3
┗┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳━━━━━━━━┳┛
1 2 3 4 5
I'm sorry but this baby from the 1990s just worked for me:
<div id="outer">
<center>Foo foo</center>
</div>
Am I going to hell for this sin?
<center>
tag is deprecated since HTML4, like Idra explained in comments
div{
width: 100px;
height: 100px;
margin: 0 auto;
}
For the normal thing if you are using div in a static way.
If you want a div to be centered when div is absolute to its parent, here is example:
.parentdiv{
position: relative;
height: 500px;
}
.child_div{
position: absolute;
height: 200px;
width: 500px;
left: 0;
right: 0;
margin: 0 auto;
}
You can add another div which has the same size of #inner and move it to the left by -50% (half of the width of #inner) and #inner by 50%.
#inner {
position: absolute;
left: 50%;
}
#inner > div {
position: relative;
left: -50%;
}
<div id="outer">
<div id="inner"><div>Foo foo</div></div>
</div>
In the previous examples they used margin: 0 auto
, display:table
and other answers used "with transform and translate".
And what about just with a tag? Everyone knows there is a <center>
tag which is just not supported by HTML5. But it works in HTML5. For instance, in my old projects.
And it is working, but now not only MDN Web Docs, but other websites are advising not to use it any more. Here in Can I use you can see notes from MDN Web Docs. But whatever, there is such a way. This is just to know. Always being noticed about something is so useful.
<center>
is only a predefined tag, not adjustable, not flexible as in CSS. It still works but those are one of the last living remnants just like <blink> and <font>. Deprecated doesn't mean that it will no more work in future... it also means that new techonolgies, be it via node react using JSX or other complex MVCs that generate virtual DOMs might be not fully capable to work with. That they still work in HTML5 despite not supported means that w3c no longer maintains it. Also SEO: Websites with deprecated HTML may signalize search engines with outdated code which could harm your ranking.
Commented
Jun 2, 2020 at 23:53
There are several ways to achieve it: using "flex", "positioning", "margin" and others. Assuming #outer
and #inner
divs given in the question:
I would recommend using "flex"
#outer {
display: flex;
justify-content: center;
align-items: center; /* if you also need vertical center */
}
Horizontal align using positioning
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
translate: transformX(-50%)
}
Horizontal and vertical-align using positioning
#outer {
position: relative;
}
#inner {
position: absolute;
left: 50%;
top: 50%;
translate: transform(-50%, -50%)
}
Horizontal align using margin
#inner {
width: fit-content;
margin: 0 auto;
}
In my case I needed to center(on screen) a dropdown menu(using flexbox for it's items) below a button that could have various locations vertically. None of the suggestions worked until I changed position from absolute to fixed, like this:
#outer {
margin: auto;
left: 0;
right: 0;
position: fixed;
}
#inner {
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
The above codes makes the dropdown to always center on the screen for devices of all sizes, no matter where the dropdown button is located vertically.
Try this:
<div style="position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);"><div>Example</div></div>
You can use one line of code, just text-align: center;
.
Here's an example:
#inner {
text-align: center;
}
<div id="outer" style="width: 100%;">
<div id="inner"><button>hello</button></div>
</div>
Use this code:
#inner {
width: 50%;
margin: 0 auto;
text-align: center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">
<div id="inner">Foo foo</div>
</div>
After reading all the answers I did not see the one I prefer. This is how you can center an element in another.
jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/
<p>Horz Center</p>
<div class="outterDiv">
<div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
<div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
<div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
position: absolute;
top:50%;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.horzCenter
{
position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.trueCenter
{
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.outterDiv
{
position: relative;
background-color: blue;
width: 10rem;
height: 10rem;
margin: 2rem;
}
.innerDiv
{
background-color: red;
width: 5rem;
height: 5rem;
}
CSS
#inner {
display: table;
margin: 0 auto;
}
HTML
<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>
You can add this code:
#inner {
width: 90%;
margin: 0 auto;
text-align:center;
}
<div id="outer">
<div id="inner">Foo foo</div>
</div>
Use:
<style>
#outer{
text-align: center;
width: 100%;
}
#inner{
text-align: center;
}
</style>
This centralizes your inner div horizontally and vertically:
#outer{
display: flex;
}
#inner{
margin: auto;
}
For only horizontal align, change
margin: 0 auto;
and for vertical, change
margin: auto 0;
One of the easiest ways you can do it is by using display: flex
. The outer div just needs to have display flex, and the inner needs margin: 0 auto
to make it centered horizontally.
To center vertically and just center a div within another div, please look at the comments of the .inner class below
.wrapper {
display: flex;
/* Adding whatever height & width we want */
height: 300px;
width: 300px;
/* Just so you can see it is centered */
background: peachpuff;
}
.inner {
/* center horizontally */
margin: 0 auto;
/* center vertically */
/* margin: auto 0; */
/* center */
/* margin: 0 auto; */
}
<div class="wrapper">
<div class="inner">
I am horizontally!
</div>
</div>
It aligns the Flexbox items at the center of the container:
#outer {
display: flex;
justify-content: center;
}
I've seen lots and lots of answers and they are all outdated. Google already implemented a solution for this common problem, which centers the object literally in the middle no matter what happens, and YES it's responsive. So never do transform()
or position
manually ever again.
...
<div class="parent">
<form> ... </form>
<div> ... </div>
</div>
.parent {
display: grid;
place-items: center;
}