Question

如何居中以下元素：

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

纸牌数量是动态设置的。外部div的宽度也是如此。根据外部div的宽度，我想这样显示它们：

|                                    |
|    |Card 1 | |Card 2 | |Card 3|    |
|    |       | |       | |      |    |
|                                    |
|    |Card 4 |                       |
|    |       |                       |



|                           |
|    |Card 1 | |Card 2 |    |
|    |       | |       |    |
|                           |
|    |Card 3 | |Card 4 |    |
|    |       | |       |    |



|                                              |
|    |Card 1 | |Card 2 | |Card 3| |Card 4 |    |
|    |       | |       | |      | |       |    |

还有其他类似问题（Centering a div block without the width），但是它们不能处理多行卡片。我尝试使用以下内容：

.outer {
  text-align: center;
}

但是这使Card 4位于中间而不是左侧。

或

.outer {
  width: 100%;
}
.inner {
  display: inline-block;
  transform: translateX(-50%); 
  left: 50%;
}

这有效，但仅在单行纸牌时有效。如果一排中的卡片数量过多，它会将所有剩余的东西对齐。

Answer 1

此地址是否代表您要做什么？

.outer {
  display: flex;
  justify-content: center;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

.cards {
  flex-basis: calc(100% / 3);
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

Answer 2

.outer {
  width: 100%;
}
.inner {
  display: flex;
  flex-flow: wrap;
  justify-content: flex-start;
}

.cards {
    width: calc(33.3333% - 40px);
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

.outer {
  width: 100%;
}
.inner {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}

.cards {
    width: calc(33.3333% - 40px);
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

.outer {
  width: 100%;
}
.inner {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
}

.cards {
    width: 200px;
    height: 270px;
    background-color: bisque;
    margin: 20px;
    box-sizing: border-box;
}

<div class="outer">
  <div class="inner">
    <div class="cards">Card 1</div>
    <div class="cards">Card 2</div>
    <div class="cards">Card 3</div>
    <div class="cards">Card 4</div>
    <div class="cards">Card 5</div>
    <div class="cards">Card 6</div>
    <div class="cards">Card 7</div>
    <div class="cards">Card 8</div>
    <div class="cards">Card 9</div>
    <div class="cards">Card 10</div>
    <div class="cards">Card 11</div>
    <div class="cards">Card 12</div>
  </div>
</div>

来自俄罗斯的你好！我爱来自美国，欧洲，亚洲的人们。所以你想做什么？

Answer 3

尝试在卡片上使用flex: auto。

.cards { 
   flex: auto; 
}

这与flex: 1 1 auto相同，而后者是flex-grow: 1; flex-shrink: 1; flex-basis: auto的简写；

然后在.inner上使用display: flex; flex-wrap: wrap;

.inner { 
   display: flex;
   flex-wrap: wrap; 
}

看看此代码段中的 css 。它有一个小操场，因此您可以动态调整.outer容器的宽度，以及外部填充，卡片边距和卡片填充：

如果愿意，可以尝试CodePen Demo：

var controlContainer=document.createElement("div");controlContainer.innerHTML='<div style="margin: 0px 0px 20px; display: flex; width: 100%; flex-direction: column; justify-content: space-around;" class="controls"><div style="display: flex; align-items: center; height: 30px;"><input class="outer-ctrl" type="range" min="100" max="1200" value="300"><label> <code>.outer { width: <span class="outer-span">300px</span> } </code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="outer-padding" type="range" min="0" max="30" value="0"><label><code>.outer: { padding: <span class="padding-span">0px</span> }</code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="card-margin" type="range" min="0" max="30" value="0"><label><code>.cards { margin: <span class="margin-span">0px</span> }</code></label></div><div style="display: flex; align-items: center; height: 30px;"><input class="card-padding" type="range" min="0" max="30" value="0"><label><code>.cards { padding: <span class="card-padding-span">0px</span> }</code></label></div></div>',document.body.prepend(controlContainer),document.querySelectorAll("span").forEach(function(e){e.style.cssText="background: black;color:white;padding: 7px;"}),document.querySelectorAll(".cards").forEach(function(e){e.style.cssText="background:yellow; border: 1px solid blue;"}),document.querySelector(".outer-ctrl").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelector(".outer").style.width=n,document.querySelector(".outer-span").innerText=n}),document.querySelector(".card-margin").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelectorAll(".cards").forEach(function(e){e.style.margin=n}),document.querySelector(".margin-span").innerText=n}),document.querySelector(".outer-padding").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelector(".outer").style.padding=n,document.querySelector(".padding-span").innerText=n}),document.querySelectorAll(".cards").forEach(function(e){e.style.cssText="background:yellow; border: 1px solid blue;"}),document.querySelector(".card-padding").addEventListener("input",function(e){var n="".concat(e.target.value,"px");document.querySelectorAll(".cards").forEach(function(e){e.style.padding=n}),document.querySelector(".card-padding-span").innerText=n}),document.body.style.cssText="margin:0;padding:0;",document.querySelector(".outer").style.border="1px solid #333;";

.outer {
  width: 300px;
  border: 1px solid #333;
}

.inner {
  display: flex;
  flex-wrap: wrap;
}

.cards {
  flex: auto;
}

<div class="outer">
  <div class="inner">
    <div class="cards card1">Card 1</div>
    <div class="cards card2">Card 2</div>
    <div class="cards card3">Card 3</div>
    <div class="cards card4">Card 4</div>
  </div>
</div>

将div以动态宽度居中，包含卡片

3 个答案: