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

Question

到目前为止，我一直在尝试创建如图所示的基本网站布局。 https://imgur.com/a/JhURder

它包含一个灰色背景，里面有一个居中的 div，背景是白色的。图像在左侧居中，文本等在右侧居中。

我是 twitter bootstrap 的忠实拥护者，到目前为止我已经实现了它。 ( react 风格)

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

到目前为止，它已经完成了一半。但老实说，我有点给了我们，因为它变成了一个嵌套的困惑。对于网站开发，我一直都知道他们是一条更大的路，所以我来这里是为了让人们了解我到目前为止的尝试，并能以适当的方式帮助我实现我的目标。

Answer 1

这里有一些关于如何实现它的想法。

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;
  }
}

祝你有个愉快的一天，先生:)