将 div 置于另一个 div 中的最佳方法是什么？

Question

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

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.

Answer 1

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

Answer 2

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.

Answer 3

尝试在要居中的内部 div 中设置 css margin: 0 auto 。