如何垂直居中我的css矩阵？答案

【问题标题】：How do I center my css matrix vertically?如何垂直居中我的css矩阵？
【发布时间】：2022-01-15 10:23:51
【问题描述】：

我的目标是使这个矩阵垂直居中。我希望单元格在垂直和水平方向上彼此相距 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>

我尝试做父子元素。但它仍然没有居中。

谢谢。

【问题讨论】：

标签： css responsive-design

【解决方案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>

【讨论】：