如何使 css 矩阵垂直居中？

Question

我的objective是让这个矩阵垂直居中。我希望单元格在垂直和水平方向上彼此相距 32px，但整个矩阵与屏幕左右边缘的距离相等（垂直居中）。我的代码：

.myArticle0 {
  column-count: 1;
  column-gap: 32px;
  column-rule: 0px single #aa00aa;
  margin: 2em;
  line-height: 100px;
}

.parent {
  width: 100%;
}

@media screen and (min-width: 700px) {
  .myArticle1 {
    column-count: 2;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 200px;
    margin: 2em;
  }
}

@media screen and (min-width: 1050px) {
  .myArticle2 {
    column-count: 3;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 300px;
  }
}

h1 {
  text-align: center;
  margin-top: 1.5em;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
}

.t7 {
  width: 350px;
  height: 100px;
  line-height: 100px;
  background-color: #f0a30b;
  margin-bottom: 2em;
}

.c1 {
  text-align: center;
}

<body>
  <h1>I am a cool headline</h1>

  <div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>

  <div class="parent">
    <div class="myArticle0 myArticle1 myArticle2 c1">
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
    </div>
  </div>
</body>

我试着做了父子元素。但是还是不居中

谢谢。

Answer 1

有一种更简单的方法可以完成此布局，但快速修复布局的方法是将 display: flex 和 justify-content: center 添加到 .parent

.myArticle0 {
  column-count: 1;
  column-gap: 32px;
  column-rule: 0px single #aa00aa;
  margin: 2em;
  line-height: 100px;
}

.parent {
  width: 100%;
  justify-content: center;
  display: flex; 
}

@media screen and (min-width: 700px) {
  .myArticle1 {
    column-count: 2;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 200px;
    margin: 2em;
  }
}

@media screen and (min-width: 1050px) {
  .myArticle2 {
    column-count: 3;
    column-gap: 32px;
    column-rule: 0px single #aa00aa;
    line-height: 300px;
  }
}

h1 {
  text-align: center;
  margin-top: 1.5em;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');
body {
  font-family: 'Open Sans', sans-serif;
}

.t7 {
  width: 350px;
  height: 100px;
  line-height: 100px;
  background-color: #f0a30b;
  margin-bottom: 2em;
}

.c1 {
  text-align: center;
}

<body>
  <h1>I am a cool headline</h1>

  <div style="text-align: center">(the following content is divided into one, two or three columns depending on the screen width)</div>

  <div class="parent">
    <div class="myArticle0 myArticle1 myArticle2 c1">
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
      <div class=t7>cool text</div>
    </div>
  </div>
</body>

如何使 css 矩阵垂直居中？

How do I center my css matrix vertically?

css

responsive-design