以下是我项目的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>
答案 0 :(得分: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.
之间切换。