How to Get a Div Centered with Another Div on the Right of It

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 :)

Align center a div and align right another div in the same row

One way is to use nested flexbox items. For this you'll need an empty spacer for the left, and each child item needs flex: 1:

.flex1 {
   flex: 1;
}

<div class="text-center mt-2 d-flex w-100" id="div1">
    <div class="d-flex flex1"><!--spacer --></div>
    <div class="d-flex flex1 justify-content-center" id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <div class="d-flex flex1 justify-content-end" id="div3">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

dead center using flexbox nesting

---

Another way is to use absolute position:

<div class="text-center mt-2 d-flex justify-content-center" id="div1">
    <div class="d-flex" id="div2">
        <a class="btn btn-lg btn-success" href="#"> Link 1 </a>
    </div>
    <div class="ms-auto position-absolute end-0" id="div3">
        <a class="btn btn-lg btn-info" href="#"> Link 2 </a>
        <a class="btn btn-lg btn-info" href="#"> Link 3 </a>
    </div>
</div>

dead center using absolute position

Read more: aligning flexbox items is explained here

How can I make a div horizontally center itself in another div?

You can set the margin-left and margin-right properties to auto. According to CSS2.1 § 10.3.3 you need to specify a width (other than auto) though:

#b {width: 300px; margin: 0 auto;}

How to align a div to the left and another div to the center?

Unfortunately there is no simple method using floats, inline-block or even flexbox which will center the 'middle' div whilst it has a sibling that takes up flow space inside the parent.

In the snippet below the red line is the center point. As you can see the left div is taking up some space and so the middle div is not centered.

Sidenote: You can't use float and display:inline block at the same time. They are mutually exclusive.

#container {

  text-align: center;

  position: relative;

}

#container:after {

  content: '';

  position: absolute;

  left: 50%;

  height: 200%;

  width: 1px;

  background: #f00;

}

#container > .first {

  float: left;

  width: 100px;

  background: #bada55;

}

#container > .second {

  display: inline-block;

  width: 100px;

  background: #c0feee;

}

<div id='container'>

  <div class='first'>Left</div>

  <div class='second'>Center</div>

</div>

---

Related Topics