在包装器中居中两个 div答案

【问题标题】：Centering two divs in a wrapper在包装器中居中两个 div
【发布时间】：2017-11-05 09:59:29
【问题描述】：

我正在尝试将 #left 和 #center 在 #wrapper 中居中，如下所示：

我试图让#center 在水平和垂直方向上都位于#wrapper 的实际中心，而#left 将在他的左边稍有余量。我如何做到这一点？

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

【问题讨论】：

标签： html css flexbox centering

【解决方案1】：

你知道#left 的宽度。现在是 13vh。

在右边添加一个等宽的伪元素。

然后将容器中的所有三个元素居中。

伪是#left 的平衡。它使#center 可以完美居中。

您可以使用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/

也可以使用实际 (DOM) 元素或绝对定位来实现布局。

【讨论】：

【解决方案2】：

你可以使用弹性盒子

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

【讨论】：

哦，你添加了想要的边距
此解决方案并未真正将#center 元素居中。它将容器中的 both 元素居中，使#center 居中对齐。 jsfiddle.net/y6r585jk/3
这就是诀窍，否则这个问题将有一个简单的答案（和 1,000 个重复项）。 jsfiddle.net/y6r585jk/4
标题误导了我

【解决方案3】：

非 flexbox 解决方案是给中心元素 position: relative，使用 text-align: center 在容器中居中，并给左侧元素 position: absolute 和 right 设置 calc(50% + 7vw)（导致到中心元素的 1 vw 距离 - 您可以随意更改）：

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

【讨论】：

【解决方案4】：

这适用于您的问题..

首先将一些 flex 属性应用到包装器以使项目居中..

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

这将所有东西都放在中心..

接下来使用 align-eslf 垂直居中。

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

最后加上margin..我加了1%来测试..

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

我有这个..

【讨论】：

从您的图像来看，您居中居中。我要求的是中心居中，左边是左边。
我很抱歉..它看起来和图片很相似..这很难..

【解决方案5】：

我能满足这个答案的唯一方法是使用智能边距使中心元素居中..

我觉得必须有更好的方法，但我确信我已经尝试了每一种组合......哈哈

无论如何..

CSS - 我为右侧添加了一个额外的包装器..

margin-left：#left 上的 5% 左边距：wrapper_r 上的 15%

您可以通过调整这些边距轻松计算绝对中心..

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

我希望这对你有用，如果有更好的 Flexbox 解决方案，我希望它发布在这里..

您的布局可能更适合或网格或更聪明:)

【讨论】：