Question

以下是我项目的link。

我希望他们两个都“居中”可以这么说。但是，是的，我知道他们都可以占据一个位置。所以我认为如果有一种方法可以绘制一条垂直居中的（不可见）水平线。然后，我可以将一个弹性项目放在这条线的顶部，另一个放在它的下方。

但我认为有一种更好的方法可以用来居中超过2个弹性项目。

body{
  background:#4A6556;
  
}


body>div>hello,hey{
  background: #CCC;
  border-radius: 7px;
  margin: 5px;
  padding: 20px;
}

body>div{
  display: flex;
  flex: row wrap;
  flex-direction: column;
}

body>div>hey{
  order:2;
  
  font-family: 'Lato', sans-serif;
  color:#212121;
  
}
body>div>hello{
  order:1;
  
  font-family: 'Kumar One', cursive;
  color: #938653;
}

hello,
hey{
  text-align: center;
}

<link href="https://fonts.googleapis.com/css?family=Kumar+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Lato" rel="stylesheet">

<body>
  <div>
<hello>Welcome!</hello>
<hey>This is my portfolio page.</hey>
   </div>
</body>

Answer 1

如果您希望显示两个项目并排或一个在另一个上面，则您的问题并不完全清楚。< / p>

：一种。并排

.va-twins {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.va-twins > * {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0; padding: 0; // SO reset, you don't need this.
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

如果您需要，这里是完全带前缀的代码（在发布时接近完全浏览器兼容性97.38%）

.va-twins {
  min-height: 100vh;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  
}
.va-twins > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

<强> B中。一个在另一个

之上

.va-twins {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}
.va-twins > * {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

body {
  margin: 0; padding: 0; // SO reset, you don't need this.
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

完全加前缀：

.va-twins {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}
.va-twins > * {
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

<div class="va-twins">
  <hello>Welcome!</hello>
  <hey>This is my portfolio page.</hey>
</div>

您可以使用@media queries在不同屏幕尺寸的A.和B.之间切换。

如何“垂直居中”两个弹性项目？

1 个答案: