如何将内部div居中？

Question

我有两个div：

<div class='container'>
  <div class='left'></div>
  <div class='center'></div>
</div>

我要居中第二个div（“居中”），

，然后将第一个内部div放在中间一个的左侧。 用chrome进行了数小时的试用，但无法正常工作。

Answer 1

.left {
  float :left;
  width: 10%;
  margin-left: 10%;
  background: green;
}

.center {
  width: 60%;
  margin: 0 auto;
  background: red;
}

.main {
  width: 100%;
  background: yellow;
}

<div class="main">
  <div class="left">&nbsp;</div>
  <div class="center">&nbsp;</div>
</div>

Answer 2

这是没有flexbox的解决方案：

function checkAnswers() {
    let score = [option1, option2, option3].reduce(
        (score, option) => score + handleOption(option),
        0
    );
    alert(`your score is ${score}`)
}

.main {
  text-align: center;
}

.main__inner {
  display: inline-block;
  position: relative;
}

.left {
  border: 1px solid tomato;
  position: absolute;
  right: 100%;
}

.center {
  border: 1px solid cyan;
}

Answer 3

这是我想出的：

.main>* {
  display: inline-block;
  width: 33%;
}

<div class='main'>
  <div class='left'>abc</div>
  <div class='center'>def</div>
</div>

如here所示。

另一个解决方案

此解决方案始终将.left放在第一位。

HTML

<div class='main'>
  <div class='center'>def</div>
  <div class='left'>abc</div>
</div>

CSS

.main {
  display: flex;
  flex-flow: row;
  flex-wrap: no-wrap;
}
.main > .left {
  order: 1;
}
.main > .center {
  order: 2;
}

如果您希望内部框具有相同的宽度：

.main > * {
  flex-basis: 33%;
}

Answer 4

要使左侧元素尽可能左移，可以使用中心元素的边距，如下所示。

边框和背景色仅供参考，

.main {
  display: flex;
  justify-content: center;
  width: 100%;
  border: thin solid black;
}

.left {
  background-color: red;
  height: 50px;
}

.center {
  background-color: blue;
  height: 50px;
  margin: 0 auto;
}

<div class='main'>
  <div class='left'>Left</div>
  <div class='center'>Center</div>
</div>

Answer 5

尝试以下

.center{max-width:300px; margin:0 auto; overflow:hidden;}
.center .innerDiv {float:left; width:50%;}

<div class="center">
<div class="innerDiv"></div>
</div>

Answer 6

您可以尝试这个

.A {
  display: flex;
  justify-content: center;
}

.B {
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;
}

.C {
  background-color: cyan;
  position: relative;
}

.C,
.B {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="A">
  <div class="C">
    <div class="B">left text</div>
    center text
  </div>
</div>