[David Hoang]

How can I horizontally center a <div> within another <div> using CSS?

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

[David Hoang]

I know I’m a bit late to answering this question, and I haven’t bothered to read every single answer so this may be a duplicate. Here’s my take:

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

[David Hoang]

Try this:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

[David Hoang]

First of all: You need to give a width to the second div:

For example:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Note that if you don’t give it a width, it will take the whole width of the line.

[David Hoang]

Instead of multiple wrappers and/or auto margins, this simple solution works for me:

<div style="top: 50%; left: 50%;
    height: 100px; width: 100px;
    margin-top: -50px; margin-left: -50px;
    background: url('lib/loading.gif') no-repeat center #fff;
    text-align: center;
    position: fixed; z-index: 9002;">Loading...</div>

It puts the div at the center of the view (vertical and horizontal), sizes and adjusts for size, centers background image (vertical and horizontal), centers text (horizontal), and keeps div in the view and on top of the content. Simply place in the HTML body and enjoy.

[David Hoang]

The best way is using table-cell display (inner) that come exactly after a div with the display table (outer) and set vertical align for the inner div (with table-cell display) and every tag you use in the inner div placed in the center of div or page.

Note: you must set a specified height to outer

It is the best way you know without position relative or absolute, and you can use it in every browser as same.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

[David Hoang]

#outer {
   width: 500px;
   background-color: #000;
   height: 500px;
}

#inner {
   background-color: #333;
   margin: 0 auto;
   width: 50%;
   height: 250px;
}

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

JSFiddle

[David Hoang]

Add text-align:center; to parent <div>:

#outer {
   text-align: center;
}

JSFiddle

Or

#outer > div {
   margin: auto;
   width: 100px;
}

JSFiddle

[David Hoang]

Add CSS to your inner div. Set margin: 0 auto and set its width less than 100%, which is the width of the outer div.

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

This will give the desired result.

[David Hoang]

Try margin: 0px auto;.

#inner {
   display: block;
   margin: 0px auto;
   width: 100px;
}

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

[David Hoang]

You can use this link.

.outer {
   display: table;
   width: 100%;
   height: 100%;
}
.inner {
   vertical-align: middle;
}

[David Hoang]

You can do it in different ways. See the below examples.

1. First Method

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

#inner {
   display: inline-block;
}

2. Second method

#outer {
   position: relative;
   overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

[David Hoang]

#inner {
  display: table;
  margin: 0 auto;
}

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

[David Hoang]

The main attributes for centering the div are margin: auto and width: according to requirements:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

[David Hoang]

Try this:

.outer {
   text-align: center;
}
.inner {
   width: 500px;
   margin: 0 auto;
   background: brown;
   color: red;
}

<div class="outer">
    <div class="inner">This DIV is centered</div>
</div>

[Author]

Posts