-1

I have so far been trying to create a basic website layout shown in this picture. https://i.stack.imgur.com/KtNe4.jpg

It includes a grey background, with a centered div inside with a white background. With centered an image to the left and text etc to the right.

I am a large advocate for twitter bootstrap, so far I have implemented this. (React style) 

            <div class="container-fluid" style={{
                'background-color' : 'rgb(224,225,226)',
                'height' : '40vh'
            }}>
                <div class="row">
                    <div class="col-1 text-center"> Test </div>

                    <div class="col-10 text-center" style={{
                        'height' : '30vh',
                        'background-color' : 'rgb(255,255,255)',
                        'margin-top' : '5vh'
                    }}>

                    centered

                    </div>

                    <div class="col-1 text-center">test</div>
                </div>
            </div>

So far it half ways. But honestly I kind of gave us because it's turned into a nested mess. With website development I always know their is a bigger way, so I come here for people to roast my attempt so far and could give me in a proper way of reaching my goal.

J.Doe
  • 39
  • 1
  • 5
  • Your title doesn't match your content at all :O Can you properly as your question in the content part? Please use https://codereview.stackexchange.com/ is you want people to evaluate your code. – Dehan Mar 23 '19 at 04:30
  • @jdc91 I thought to accomplish my goal I had to center a div inside a div twice, is there a better route? – J.Doe Mar 23 '19 at 04:43

3 Answers3

8

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

Doppio
  • 2,018
  • 12
  • 11
  • Nice answer, but I found this the most useful. https://getbootstrap.com/docs/4.3/utilities/flex/ – J.Doe Mar 23 '19 at 23:20
0

With FlexBox

With display: flex; you can specify the properties justify-content and align-items to center in order to center child elements both horizontally and vertically.

When a display: flex element is a row (flex-direction: row;) justify-content will handle horizontal positioning while align-items handles vertical positioning. When flex-direction is set to column, justify-content and align-items meanings are swapped.

Example:

.parent-element {
  display: flex;
  /* flex-direction defaults to row */

  justify-content: center;
  align-items: center;
}

With CSS Grid

You can utilize the property place-items to center the children of a grid. You should be aware, however, that place-items is not currently supported on all browsers.

Example:

.parent-element {
  display: grid;
  place-items: center;
}

Margin auto

Sometimes you can utilize the auto value for the margin property to push an element towards the center.

Be sure to check out this post that explains what is needed for margin: auto; to work.

Example:

.child-element {
  /* top right bottom left -- all set to auto */
  margin: auto;
}

Absolute positioning with a transform

You can position an item in the center of the screen by setting the position property to absolute (this will take it out of the normal document flow). Then, you can use the properties left and top to move the element down and to the right 50%.

Once it's pushed 50% we need to move it back half the width/height of the element, we can do that with a translate inside the property transform.

Example:

.child-element {
  position: absolute;
  top: 50%;
  left: 50%;

  /* translate(<x value>, <y value>) */
  transform: translate(-50%, -50%);
}

Disclaimer:

This is not advised for elements that are a part of your normal document flow as they will most likely overlap other elements. It's great for modals though.

Andria
  • 4,712
  • 2
  • 22
  • 38
-1

Try setting the css margin: 0 auto in your inner div that you want to center.

Irene Mitchell
  • 44
  • 3