Question

我目前有以下代码：

<div id="container">
     <div class="card">1</div>
     <div class="card">2</div>
     <div class="card">3</div>
     <div class="card">4</div>
</div>

<style>
    #container{
       width:100%;
       height:100%;
       overflow-y:auto;
       position:absolute;
       left:0; top:10px;
       padding:10px;
    }

    .card{
       width:100px; height:100px; margin:10px;
       float:left;
    }
</style>

我正在尝试垂直和水平对齐div框，以便显示更多的框，它仍然在容器中垂直和水平居中。例如：

使用适合容器的4张卡片的示例...

12个卡在容器中溢出的情况示例..

使用不适合容器的卡片的示例...

Answer 1

DEMO

HTML

<div class="container">
  <div class="container-wrapper">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
</div>

CSS

.container {
  position: relative;
  display:table;
  background: red;
  width:100%;
  height: 100%; /* auto is default, you can have ur height here */
}

.container-wrapper {
  display: table-cell;
  margin:auto;
  text-align:center;
  font-size:0;
  width:90%;
  height:90%;
  vertical-align:middle;
}

.card {
  display: inline-block;
  height:100px;
  width:100px;
  border: 1px solid #ddd;
  background: #eee;
  margin:10px;
}

DEMO 2 with some height of the container

Answer 2

尝试 Flexbox DEMO

#container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  margin: 0 auto;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  max-width: 750px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.card{
  width:100px; 
  height:100px; 
  margin:10px;
  border: 1px solid black;
 }

<div id="container">
  <div class="inner">
     <div class="card">1</div>
     <div class="card">2</div>
     <div class="card">3</div>
     <div class="card">4</div>
     <div class="card">1</div>
     <div class="card">2</div>
     <div class="card">3</div>
     <div class="card">4</div>
     <div class="card">3</div>
     <div class="card">4</div>
  </div>
</div>

Answer 3

您可能无法为项目使用外部库，但我认为还有很多东西需要学习。

您的情况是网格系统如何有用的基本示例。事实上，这个问题已经通过这样的系统解决并等同了很多次。

通常我会建议Twitter Bootstrap 3，但由于这个框架有点复杂，我认为阅读更轻量级的内容会更容易，比如960 grid system。这里有两个链接，可以简要介绍一下库：

一旦你理解了这一点，IMO，你别无选择，只能深入了解框架，看看它是如何完成的。这将是凌乱的。

我也相信你必须使用JavaScript。你能用jQuery吗？无论哪种方式，在添加新卡时，使用JavaSctipt检测它，然后根据它更改DOM。

希望我帮助过。

垂直和horinzontally对齐容器中的多个div儿童

3 个答案: