Centering two divs in a wrapper

Question

I am trying to center #left and #center inside #wrapper like this:

I am trying to get #center to be in the actual center of #wrapper both horizontally and vertically, and that #left will be in a slight margin to his left. How do I achieve that?

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  border: 1px solid red;
}

#left {
  display: inline-block;
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

<div class="c">
  <div>content content content</div>
  <div>content content content</div>

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


  </div>
  <div>content content content</div>
  <div>content content content</div>

Jsfiddle: https://jsfiddle.net/y6r585jk/2/

Michael Benjamin · Answer 1 · 2017-06-04T15:00:29.080

You know the width of #left. It's 13vh.

Add a pseudo-element on the right with the same width.

Then center all three elements in the container.

The pseudo is a counter-balance to #left. It enables #center to be perfectly centered.

You can hide the pseudo with visibility: hidden.

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;

  /* new */
  display: flex;
  justify-content: center; /* center children horizontally */
  align-items: center;     /* center children vertically */
}

/* new */
#wrapper::after {
  content: 'right';
  width: 13vh;
  border: 1px dashed black;
  /* visibility: hidden; */
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  border: 1px solid red;
  margin: 0 5px; /* new */
}

#left {
  display: inline-block;
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

<div class="c">
  <div>content content content</div>
  <div>content content content</div>
  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
  </div>
  <div>content content content</div>
  <div>content content content</div>
</div>

https://jsfiddle.net/y6r585jk/4/

The layout can also be achieved using an actual (DOM) element or absolute positioning.

More details here: Center and right align flexbox elements

score 1 · Answer 2 · answered Jun 04 '17 at 14:43

1

You can use flexbox

.c {
border: 1px solid black;
    margin-left: auto;
    margin-right: auto;
    width: 60vw;
    height: 80vh;
    margin-top: 13vh;
}
#wrapper {
  display : flex;
  justify-content : center;
  align-items : center;
    height: 13vh;
    margin-top: 2vh;
    border: 1px solid blue;
}
#center {
    display: inline-block;
    width:12vw;
    height:10vh;
    border: 1px solid red;
}
#left {
    display: inline-block;
    width:13vh;
    height:13vh;
    border: 1px solid green;
}

<div class = "c">
<div>content content content</div> 
<div>content content content</div> 

<div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
</div>
<div>content content content</div> 
<div>content content content</div>

answered Jun 04 '17 at 14:43

Oh and you add the margin wanted – Jun 04 '17 at 14:52
This solution does not truly center the `#center` element. It centers *both* elements in the container, which aligns `#center` at center-right. https://jsfiddle.net/y6r585jk/3/ – Michael Benjamin Jun 04 '17 at 14:57
That's the trick, otherwise this question would have an easy answer (and 1,000 duplicates). https://jsfiddle.net/y6r585jk/4/ – Michael Benjamin Jun 04 '17 at 15:01
the title misled me – Jun 04 '17 at 15:35

score 1 · Answer 3 · answered Jun 04 '17 at 15:24

A non-flexbox solution would be to give the center element position: relative, center it in the container using text-align: center, and give the left element position: absolute and a right setting of calc(50% + 7vw) (resulting in 1 vw distance to the center element - you can change that as you like):

.c {
  border: 1px solid black;
  margin-left: auto;
  margin-right: auto;
  width: 60vw;
  height: 80vh;
  margin-top: 13vh;
}

#wrapper {
  height: 13vh;
  margin-top: 2vh;
  border: 1px solid blue;
  text-align:center;
}

#center {
  display: inline-block;
  width: 12vw;
  height: 10vh;
  margin-top: 1vh;
  border: 1px solid red;
  position: relative;
}

#left {
  display: inline-block;
  position: absolute;
  right: calc(50% + 7vw);
  width: 13vh;
  height: 13vh;
  border: 1px solid green;
}

<div class="c">
  <div>content content content</div>
  <div>content content content</div>

  <div id="wrapper">
    <div id="left">left</div>
    <div id="center">center</div>
  </div>
  <div>content content content</div>
  <div>content content content</div>

score 0 · Answer 4 · answered Jun 06 '17 at 00:19

0

This works for your problem..

First apply some flex attributes to the wrapper to center the items..

#wrapper {
display: flex;
justify-content: center;
align-content: center;
border: 1px solid blue;
}

THis putts everything in the center..

next use align-eslf to center vertically.

#center {
display: inline-block;
align-self: center;

Finally add the margin.. I have added 1% to test..

#center {
display: inline-block;
align-self: center;
margin-left: 1%;

I have this..

answered Jun 06 '17 at 00:19

johnashu

2,167
4
19
44

judging by your image, you centered both center and left. what i asked is for center to be centered and that left will be to it's left side. – RunningFromShia Jun 06 '17 at 21:12
My apologies.. it looked similar to the picture..it is a tough one this.. – johnashu Jun 06 '17 at 23:08

score 0 · Answer 5 · answered Jun 06 '17 at 23:28

The only way i can satisfy this answer is with smart margins to center tthe center element..

I feel like there has to be a better way but I'm sure I have tried every combination.. lol

anyhow..

CSS - I added an extra wrapper for the right hand side..

margin-left: 5% on the #left margin-left: 15% on wrapper_r

You can easily calculate the absolute center by adjusting these margins..

                          .c {
              border: 1px solid black;
              margin-left: auto;
              margin-right: auto;
              width: 60vw;
              height: 80vh;
              margin-top: 13vh;
            }


          .wrapper1 {
          display: flex;
          justify-content: flex-start;
          border: 1px solid blue;    }


        #left {
              margin-left: 5%;
        width: 13vw;
        height: 13vh;
        border: 1px solid green;
      }

          #wrapper_r {
      display: flex;
      align-items: center;
      margin-left:15%

          }
          #center {
          flex: 1;
        width: 12vw;
        height: 10vh;
        border: 1px solid red;
      }

HTML

          <div class="c">
            <div>content content content</div>
            <div>content content content</div>


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

            <div id="wrapper_r">
              <div id="center">center</div>


            </div></div>


            <div>content content content</div>
            <div>content content content</div>

I hope this works for you and I hope if there is a better solution with Flexbox It is posted here..

Your layout might be more suited or grid or a smarter mind :)

Centering two divs in a wrapper

5 Answers5