How to get a div centered with another div on the right of it?

Question

I\'m trying to make a centered div with another div on the right of it. So the div on the left is horizontal centered. De div

Answer 1

You can do it with the Flexbox and positioning:

.flex-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  background: #009a9a;
}

#right {
  position: absolute;
  left: 50%; /* moved right by half of the parent's width */
  transform: translateX(50%); /* and half of its own width */
  background: #bbad4f;
}

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

No matter the divs width (as long as they stay the same), this solution is dynamic, therefore no unnecessary margins or calc().

But with the help of CSS variables you can make it completely dynamic:

:root {
  --leftWidth: 200px;
}

.flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  width: var(--leftWidth);
  background: #009a9a;
}

#right {
  position: absolute;
  left: calc(50% + (var(--leftWidth)/2)); /* moved right by half of the parent's and sibling's width */
  background: #bbad4f;
}

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

Answer 2

This is using absolute positions. Please not that the amount of left:150px; is the half width of centered div + half width of left div. Also the style margin-left:200px; on the lef div, comes from the width of centered div.

.container {
  position: relative;
}

.centered {
  width: 200px;
  background: #eeeeee;
  position: absolute;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
}

.leftOf {
  background: #ff8800;
  position: absolute;
  left: 150px;
  margin-left: 200px;
  height: 100px;
  width: 100px
}

<div class="container">
  <div class="centered"></div>
  <div class="leftOf"></div>
</div>

Answer 3

Here another example if you can't use transform or if you don't know elements size. You can do it with flexbox or just just by using margin: auto to center the first element.

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

.Left {
  background-color: red;
  position: absolute;
  left: 100%;
  top: 0;
}

.Centered {
  background-color: cyan;
  position: relative;
}

/* Demo only */

.Centered, .Left {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="Container"> 
  <div class="Centered">
    <div class="Left">Right</div>
    Centered
  </div>
</div>

Answer 4

body,
html {
  height: 100%;
  font-size: 0;
}

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#left {
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  background: #009a9a;
}

#right {
  background: #bbad4f;
  left: calc(50% + 100px);
  top: calc(50% + 100px);
  position: relative;
  transform: translate(calc(-50% - 100px), calc(-50% - 100px));
}

<div id="left"></div>

<div id="right"></div>