Center Two Divs in The Middle of a Wrapper

Center two divs in the middle of a wrapper

If I understand your question correctly, this should work:

#wrap {
    background: #e7e7e7;
    padding: 5%;
    text-align: center;
    width: 80%;  
}

#left, #right {
     background: #ccc;
     display: inline-block;    
     padding: 2%;   
}

View Example

This will center two div blocks within the wrap, side by side.

---

EDIT: 2015 Flexbox Solution

Flexbox is much more widely supported now and is most likely a better solution for this situation. There are some quirks that come along with the above inline-block method, such as horizontal spacing and vertical alignment issues. Here is the flexbox solution:

#wrap {
    background: #e7e7e7;
    display: flex;
    justify-content: center;
    padding: 5%; 
    width: 80%;  
}

#left, #right {
    background: #ccc;
    padding: 2%;   
}

View Example

Be sure to check Can I Use to confirm that flexbox is supported in the browsers you are supporting.

2019 Edit: Commenter MC9000 brought up that my example is not responsive in percents, as the original question mentioned. I've updated my examples to show that this works with percentage based sizing just like it does with pixel based sizing.

Vertically center two divs inside a wrapper (with dynamic content and content below the wrapper)

Use display: inline-block + vertical-align: middle on the blocks, so they would be aligned just like you want them to.

Look at this example: http://jsfiddle.net/kizu/Tky8T/

Even more: the height of the red div can be dynamic too!

Horizontally Center two divs within a container div

You should change some styling for the wrapper and you'll be good:

.wrapper {
    display: block;
    text-align: center;
}

https://jsfiddle.net/fjtq28g7/3/

EDIT

If, by your comment, flexbox is still an option, you could try this:

https://jsfiddle.net/fjtq28g7/7/

The only actual changes are in the wrapper:

.wrapper {
    display: flex;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 0 3%;
}

How to center multiple divs inside a container in CSS

My previous answer showed a frankly outdated method (it still works, there are just better ways to achieve this). For that reason, I'm updating it to include a more modern, flexbox solution.

See support for it here; in most environments, it's safe to use.

This takes advantage of:

• display: flex: Display this element with flexbox behaviour
• justify-content: center Align the inner elements centrally along the main axis of the container
• flex-wrap: wrap Ensure the inner elements automatically wrap within the container (don't break out of it)

_{Note: As is usual with HTML & CSS, this is just one of many ways to get the desired result. Research thoroughly before you choose the way that's right for your specifications.}

.container {    display: flex;    justify-content: center;    flex-wrap: wrap;    width: 70%;    background: #eee;    margin: 10px auto;    position: relative;    text-align:center;}
.block {    background: green;    height: 100px;    width: 100px;    margin: 10px;}

<div class="container">    <div class="block">1. name of the company</div>    <div class="block">2. name of the company</div>    <div class="block">3. name of the company</div>    <div class="block">4. name of the company</div>    <div class="block">5. name of the company</div>    <div class="block">6. name of the company</div>    <div class="block">7. name of the company</div>    <div class="block">8. name of the company</div></div>

How to center two divs floating next to one another

You will have to automatically set the margin and probably a specific width to your wrapper div

<div id="wrapper"></div>

In your CSS:

#wrapper {
    width: 70%;
    margin: 0 auto;
}

two divs lying horizontally centered in wrapping div

#navbar5 {
  width: auto;
  text-align: center;
  float: left;
}

.simple_text {
  display: flex;
  justify-content: center;
}

#two,
#navbar5 button:last-of-type {
  margin: 0 0 0 10px;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div class="simple_text">
    <div id="one"> xxxxxxx </div>
    <div id="two"> yyyyyyy </div>
  </div>
</div>

Trying to center 2 groups of 2 divs each at the middle of a wrapper

I don't really understand so please clarify.

Here you go, the body-content is sitting in the middle of main, while blocka is sitting in the middle of body-content. You didn't said where will the main be position so I left it in the right-side.

Colors are for visualization and I reduced the body-content's width to see the main behind it

.main {  max-width: 80%;  margin: 0 auto;  background-color: red;}
.body-content {  background-color: blue;  margin: 0 auto;  width: 50%;  padding: 15px;  border: 1px solid grey;  height: 100px;  text-align:center;}

<div class="main">
  <div class="body-content">    <div class="blocka">      <div class="body-content-items">Add All</div>      <div class="body-content-items">Add All</div>    </div>    <div class="blocka">      <div class="body-content-items">Add All</div>      <div class="body-content-items">Add All</div>    </div>  </div></div>

---

Related Topics