居中 DIV & 响应式

Question

我正在尝试构建一个简单的响应式页面，页面中心有 3 个正方形，如果我们重新调整 window。

这是我想做的事情的小图：

我正在 angular 环境中使用 materialize 构建此页面，为了简化我的问题，这里复制了我当前的实现：

<div class="container-wrapper">
  <div class="container">
    <div style="height: 100%; width:100%">
    <ul class="list-group-horizontal">
      <li class="list-group-item">
        <div class="item-wrapper">
            <i class="material-icons pointer">play_arrow</i>
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
      <li class="list-group-item">
        <div class="item-wrapper">
        </div>
      </li>
    </ul>
    </div>
  </div>
</div>

还有我的 Css :

.container-wrapper {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 50;
}
.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    padding: 80px 0;
    height: 400px;
    text-align: center;
}


.list-group-horizontal {
    height: 100%;
}


.list-group-horizontal .list-group-item {
    display: inline-block;
}

.list-group-horizontal .list-group-item {
    margin-bottom: 0;
    margin-left:-4px;
    margin-right: 0;
    border-right-width: 0;
    height: 100%;
    width: 33%;
}

.item-wrapper {
    vertical-align: middle;
    border: 2px solid #1563aa;
    background: rgba(33, 33, 33, 0.48);
    border-radius: 5px;
    width: 15vw; 
    height: 15vw;
    margin: auto;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

.item-wrapper:hover {
   background-color: rgba(255, 255, 255, 0.4);
}

此外，我想将图像 (play_arrow) 置于 div

的中心

我在 css 上苦苦挣扎，我认为我的 css 代码没有达到应有的水平，如果您对我的问题或最佳解决方案有任何提示对于我目前的 css，请随时回答 :)

谢谢

Answer 1

这可行：

#boxes {
width:300px;
margin: auto;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
text-align:center;

}

#boxes .box {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 1px solid Black;
}

<div id="boxes">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>

Answer 2

我不打算post一些非常原创的东西（我的回答是第二个），但这里是 flex 版本，而不是网格。

简单地说，grid 用于对齐大面积的布局，而 flex 通常在需要对齐一些小东西时更好，例如 header 中的 3 个按钮。但是，您仍然可以使用 flex 来创建没有网格的整体布局。例如，Chrome 内部书签管理器就是这样创建的。

此外，在谈论 flex 和 CSS-grid 时，您应该注意到 CSS-grid 在 CSS 的世界中是非常新的动物，如果您考虑与旧浏览器的兼容性, flex 会更好；比较浏览器对 Flexbox and CSS-grid.

的支持

Test

<div id="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<style>
#boxes {
    width:100%;
    display: flex;
}

#boxes .box {
    height: 90px;
    margin: 20px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    border: 1px solid Black;
}
</style>

居中 DIV & 响应式

Center DIV & responsive

html

css

center

responsive