水平居中的flex项目

Question

是否可以像这张图片一样水平居中 .div2，而不使用 absolute/fixed 定位？

div3 的宽度可能会变化。

以下是我的代码：

body {
  margin:0;
}

.test {
  background:green;
  color:#fff;
  display:flex;
}

.test .div1 {
  
}

.test .div2 {
  margin:0 auto;
background:red;
}

.test .div3 {
  margin:0 0 0 auto;
}

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>

- Moor Wead

---

请查看此处的第71个方框，解决方案#2：https://dev59.com/tlwY5IYBdhLWcg3wgX6V#33856609 - Michael Benjamin

Answer 1

你可以给所有的div设置33.3333%的宽度。

.test {
  background:green;
  color:#fff;
  display:flex;
}

.test .div1 {
  width:33.3333%;
}

.test .div2 {
  margin:0 auto;
background:red;
  width:33.3333%;
}

.test .div3 {
  margin:0 0 0 auto;
    width:33.3333%;
}

<div class="test">
    <div class="div1">Left options</div>
    <div class="div2">Center div</div>
    <div class="div3">Username: test (string can change)</div>
</div>

- Creator

Answer 2

使用以下代码，使用 display:flex 样式属性。

body {
  margin:0;
}

.test {
  background: green;
  color:#fff;
  display:flex;
}

.test div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: green;
  height: 50px;
}

<div class="test">
  <div>Left options</div>
  <div>Center div</div>
  <div>Username: test (string can change)</div>
</div>

- Pravin Vavadiya

Answer 3

我假设您希望div2保持其大小，而div1和div3元素则增长直到接触它。为这些元素设置flex-basis为0：

body {
  margin: 0;
}
.test {
  background: green;
  color: #fff;
  display: flex;
}
.test .div2 {
  background: red;
}
.test .div1,
.test .div3 {
  flex-basis: 0;
  flex-grow: 1;
}
.div3 {
  text-align: right;
}

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>

- vals

Answer 4

给父元素添加 display:flex 属性。然后使用 justify-contents 在主轴上对齐子元素，使用 `align-items' 垂直对齐子元素。
获取更多详细信息 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

<div class="test">
  <div class="div1">Left options</div>
  <div class="div2">Center div</div>
  <div class="div3">Username: test (string can change)</div>
</div>
<style>
.test{
display: flex;
justify-content: space-between;
align-items: center;
height: 50px;
}
</style>

- Jagajit Prusty

Answer 5

float:left; 应用于 .test 内的所有 div 即可解决问题。

.test>div{float:left;}

如果您想让

占据整个宽度，请将其宽度设置为width:33.3333%（divs的数量/100）。

DEMO

- Rusty