Clash Royale CLAN TAG#URR8PPP

How to horizontally center a <div> in another <div>?

How can I horizontally center a <div> within another <div> using CSS (if it's even possible)?

<div>

<div>

<div id="outer">
<div id="inner">Foo foo</div>
</div>


90 Answers
90

You can apply this CSS to the inner <div>:

<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.

width

50%

<div>

margin: 0 auto

If you are targeting IE8+, 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.

width

Working example here:

#inner
display: table;
margin: 0 auto;


<div id="outer" style="width:100%">
<div id="inner">Foo foo</div>
</div>

margin-left: auto; margin-right: auto

margin:0 auto

margin: <whatever_vertical_margin_you_need> auto

If you don't want to set a fixed width on the inner div you could do something like this:

div

#outer
width: 100%;
text-align: center;


#inner
display: inline-block;


<div id="outer">
<div id="inner">Foo foo</div>
</div>

That makes the inner div into an inline element that can be centered with text-align.

div

text-align

float: none;

float

left

right

text-align

text-align

initial

The best approaches are with CSS 3.

#outer
width: 100%;

/* Firefox */
display: -moz-box;
-moz-box-pack: center;
-moz-box-align: center;

/* Safari and Chrome */
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;

/* W3C */
display: box;
box-pack: center;
box-align: center;

#inner
width: 50%;



According to your usability you may also use the box-orient, box-flex, box-direction properties.

box-orient, box-flex, box-direction

Flex:

#outer
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;



Link 2

Link 3

Link 4

And this explains why the box model is the best approach:

-webkit

display: -webkit-flex;

-webkit-align-items: center;

-webkit-justify-content: center;

Suppose that your div is 200px wide:

200px

.centered
position: absolute;
left: 50%;
margin-left: -100px;



Make sure the parent element is positioned i.e. relative, fixed, absolute, or sticky.

If you don't know the width of your div, you can use transform:translateX(-50%); instead of the negative margin.

transform:translateX(-50%);

https://jsfiddle.net/gjvfxxdj/

I've created this example to show how to vertically and horizontally align.

align

Code is basically this:

#outer
position: relative;



and...

#inner
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;



and it will stay in the center even when you re-size your screen.

center

Some posters have mentioned the CSS 3 way to center using display:box.

display:box

This syntax is outdated and shouldn't be used anymore. [See also this post].

So just for completeness here is the latest way to center in CSS 3 using the Flexible Box Layout Module.

So if you have simple markup like:

<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>


...and you want to center your items within the box, here's what you need on the parent element (.box):

.box
display: flex;
flex-wrap: wrap; /* Optional. only if you want the items to wrap */
justify-content: center; /* For horizontal alignment */
align-items: center; /* For vertical alignment */



.box
display: flex;
flex-wrap: wrap;
/* Optional. only if you want the items to wrap */
justify-content: center;
/* For horizontal alignment */
align-items: center;
/* For vertical alignment */

*
margin: 0;
padding: 0;

html,
body
height: 100%;

.box
height: 200px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border: 2px solid tomato;

.box div
margin: 0 10px;
width: 100px;

.item1
height: 50px;
background: pink;

.item2
background: brown;
height: 100px;

.item3
height: 150px;
background: orange;


<div class="box">
<div class="item1">A</div>
<div class="item2">B</div>
<div class="item3">C</div>
</div>

If you need to support older browsers which use older syntax for flexbox here's a good place to look.

flex-direction

justify-content: center;

justify-content: center;

If you don't want to set a fixed width and don't want the extra margin, add display: inline-block to your element.

display: inline-block

You can use:

#element
display: table;
margin: 0 auto;



display: table;

CSS3's box-align property

#outer
width:100%;
height:100%;
display:box;
box-orient:horizontal;
box-pack:center;
box-align:center;



It cannot be centered if you don't give it a width, otherwise it will take, by default the whole horizontal space.

Horizontally and vertically. It works with reasonably modern browsers (Firefox, Safari/WebKit, Chrome, Internet Explorer 10, Opera, etc.)

.content
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);


<div class="content">This works with any content</div>

Tinker with it further on Codepen or on JSBin.

Set the width and set margin-left and margin-right to auto. That's for horizontal only, though. If you want both ways, you'd just do it both ways. Don't be afraid to experiment; it's not like you'll break anything.

width

margin-left

margin-right

auto

I recently had to center a "hidden" div (ie, display:none;) that had a tabled form within it that needed to be centered on the page. I wrote the following jQuery to display the hidden div & then update the CSS to the automatic generated width of the table and change the margin to center it. (The display toggle is triggered by clicking on a link, but this code wasn't neccessary to display.)

NOTE: I'm sharing this code because Google brought me to this Stack Overflow solution & everything would have worked except that hidden elements don't have any width & can't be resized/centered until after they are displayed.

$(function()
$('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
<form action="">
<table id="innerTable">
<tr><td>Name:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="text"></td></tr>
<tr><td>Email:</td><td><input type="submit"></td></tr>
</table>
</form>
</div>

The way I usually do it is using absolute position:

#inner
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
position: absolute;



The outer div doesn't need any extra propertites for this to work.

For Firefox and Chrome:

<div style="width:100%;">
<div style="width: 50%; margin: 0px auto;">Text</div>
</div>

For Internet Explorer, Firefox, and Chrome:

<div style="width:100%; text-align:center;">
<div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

The text-align: property is optional for modern browsers, but it is necessary in Internet Explorer Quirks Mode for legacy browsers support.

text-align:

This is my answer.

#outerDiv
width: 500px;


#innerDiv
width: 200px;
margin: 0 auto;


<div id="outerDiv">
<div id="innerDiv">Inner Content</div>
</div>

Chris Coyier who wrote an excellent post on 'Centering in the Unknown' on his blog. It's a roundup of multiple solutions. I posted one that isn't posted in this question. It has more browser support then the flexbox-solution, and you're not using display: table; which could break other things.

display: table;

/* This parent can be any width and height */
.outer
text-align: center;


/* The ghost, nudged to maintain perfect centering */
.outer:before
content: '.';
display: inline-block;
height: 100%;
vertical-align: middle;
width:0;
overflow:hidden;


/* The element to be centered, can
also be of any width and height */
.inner
display: inline-block;
vertical-align: middle;
width: 300px;



Another solution for this without having to set a width for one of the elements is using the CSS 3 transform attribute.

transform

#outer
position: relative;


#inner
position: absolute;
left: 50%;

transform: translateX(-50%);



The trick is that translateX(-50%) sets the #inner element 50 percent to the left of its own width. You can use the same trick for vertical alignment.

translateX(-50%)

#inner

Here's a Fiddle showing horizontal and vertical alignment.

More information is on Mozilla Developer Network.

-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);

I realize I'm pretty late to the game, but this is a very popular question, and I recently found an approach I haven't seen mentioned anywhere here, so I figured I'd document it.

#outer
position: absolute;
left: 50%;


#inner
position: relative;
left: -50%;



EDIT: both elements must be the same width to function correctly.

#inner

#inner position:relative; left:50%; transform:translateX(-50%);

For example, see this link and the snippet below:

div#outer
height: 120px;
background-color: red;


div#inner
width: 50%;
height: 100%;
background-color: green;
margin: 0 auto;
text-align: center; /* For text alignment to center horizontally. */
line-height: 120px; /* For text alignment to center vertically. */


<div id="outer" style="width:100%;">
<div id="inner">Foo foo</div>
</div>

If you have a lot of children under a parent, so your CSS content must be like this example on fiddle.

The HTML content look likes this:

<div id="outer" style="width:100%;">
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> Foo Text </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> Foo Text </div>
</div>


Then see this example on fiddle.

Centering only horizontally

In my experience, the best way to center a box horizontally is to apply the following properties:

text-align: center;

display: inline-block;

.container
width: 100%;
height: 120px;
background: #CCC;
text-align: center;


.centered-content
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;


<div class="container">
<div class="centered-content">
Center this!
</div>
</div>

See also this Fiddle!

Centering both horizontally & vertically

In my experience, the best way to center a box both vertically and horizontally is to use an additional container and apply the following properties:

display: table;

display: table-cell;

vertical-align: middle;

text-align: center;

display: inline-block;

.outer-container
display: table;
width: 100%;
height: 120px;
background: #CCC;


.inner-container
display: table-cell;
vertical-align: middle;
text-align: center;


.centered-content
display: inline-block;
background: #FFF;
padding: 20px;
border: 1px solid #000;


<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Center this!
</div>
</div>
</div>

See also this Fiddle!

The easiest way:

#outer
width: 100%;
text-align: center;

#inner
margin: auto;
width: 200px;


<div id="outer">
<div id="inner">Blabla</div>
</div>

Here is what you want in the shortest way.

JSFIDDLE

#outer
margin - top: 100 px;
height: 500 px; /* you can set whatever you want */
border: 1 px solid# ccc;


#inner
border: 1 px solid# f00;
position: relative;
top: 50 % ;
transform: translateY(-50 % );



You can do something like this

#container
display: table;
width: <width of your container>;
height: <height of your container>;


#inner
width: <width of your center div>;
display: table-cell;
margin: 0 auto;
text-align: center;
vertical-align: middle;



This will also align the #inner vertically. If you don't want to, remove the display and vertical-align properties;

#inner

display

vertical-align

Well, I managed to find a solution that maybe will fit all situations, but uses JavaScript:

Here's the structure:

<div class="container">
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
<div class="content">Your content goes here!</div>
</div>


And here's the JavaScript snippet:

$(document).ready(function()
$('.container .content').each( function()
container = $(this).closest('.container');
content = $(this);

containerHeight = container.height();
contentHeight = content.height();

margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
)
);


If you want to use it in a responsive approach, you can add the following:

$(window).resize(function()
$('.container .content').each( function()
container = $(this).closest('.container');
content = $(this);

containerHeight = container.height();
contentHeight = content.height();

margin = (containerHeight - contentHeight) / 2;
content.css('margin-top', margin);
)
);


This method also works just fine:

div.container
display: flex;
justify-content: center; /* for horizontal alignment */
align-items: center; /* for vertical alignment */



For the inner <div>, the only condition is that its height and width must not be larger than the ones of its container.

<div>

height

width

Text-align: center

Applying text-align: center the inline contents are centered within the line box. However since the inner div has by default width: 100% you have to set a specific width or use one of the following:

text-align: center

width: 100%

display: block

display: inline

display: inline-block

#inner
display: inline-block;


#outer
text-align: center;


<div id="outer">
<div id="inner">Foo foo</div>
</div>

Margin: 0 auto

Using margin: 0 auto is another option and it is more suitable for older browsers compatibility. It works together with display: table.

margin: 0 auto

display: table

#inner
display: table;
margin: 0 auto;


<div id="outer">
<div id="inner">Foo foo</div>
</div>

Flexbox

display: flex behaves like a block element and lays out its content according to the flexbox model. It works with justify-content: center.

display: flex

justify-content: center

Please note: Flexbox is compatible with most of the browsers but not all. See here for a complete and up to date list of browsers compatibility.

#inner
display: inline-block;


#outer
display: flex;
justify-content: center;


<div id="outer">
<div id="inner">Foo foo</div>
</div>

Transform

transform: translate lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. To center horizontally it require position: absolute and left: 50%.

transform: translate

position: absolute

left: 50%

#inner
position: absolute;
left: 50%;
transform: translate(-50%, 0%);


<div id="outer">
<div id="inner">Foo foo</div>
</div>

<center> (Deprecated)

<center>

The tag <center> is the HTML alternative to text-align: center. It works on older browsers and most of the new ones but it is not considered a good practice since this feature is obsolete and has been removed from the Web standards.

<center>

text-align: center

#inner
display: inline-block;


<div id="outer">
<center>
<div id="inner">Foo foo</div>
</center>
</div>

Try playing around with

margin: 0 auto;


If you want to center your text too, try using:

text-align: center;


Flex have more than 97% browser support coverage and might be the best way to solve these kind of problems within few lines:

#outer
display: flex;
justify-content: center;



One option existed that I found:

Everybody says to use:

margin: auto 0;


But there is another option. Set this property for the parent div. It
works perfectly anytime:

text-align: center;


And see, child go center.

And finally CSS for you:

#outer
text-align: center;
display: block; /* Or inline-block - base on your need */


#inner

position: relative;
margin: 0 auto; /* It is good to be */



If width of the content is unknown you can use the following method. Suppose we have these two elements:

.outer

.inner

Suppose the computed width of the elements are 1000px and 300px respectively. Proceed as follows:

.inner

.center-helper

.center-helper

.inner

.center-helper

.inner

.outer

Demo:

body
font: medium sans-serif;


.outer
overflow: hidden;
background-color: papayawhip;


.center-helper
display: inline-block;
position: relative;
left: 50%;
background-color: burlywood;


.inner
display: inline-block;
position: relative;
left: -50%;
background-color: wheat;


<div class="outer">
<div class="center-helper">
<div class="inner">
<h1>A div with no defined width</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
Duis condimentum sem non turpis consectetur blandit.<br>
Donec dictum risus id orci ornare tempor.<br>
Proin pharetra augue a lorem elementum molestie.<br>
Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
</div>
</div>
</div>

.outer
overflow: hidden;

.center-helper
float: left;
position: relative;
left: 50%;

.inner
float: left;
position: relative;
left: -50%;



Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).



Would you like to answer one of these unanswered questions instead?