gpt4 book ai didi

html - 为什么我的容器不是垂直和水平居中对齐

转载 作者:太空宇宙 更新时间:2023-11-03 23:32:32 26 4
gpt4 key购买 nike

为什么我的容器没有垂直和水平居中对齐。

<div class="flex-container">
<header></header>
<article></article>
<aside></aside>
<footer></footer>
</div>

CSS

.flex-container {
display: flex;
flex-flow: row;
align-items: center;
justify-center: center;
}

.flex-container > * {
min-width: 100px;
min-height: 100px;
}

header {
background: rgba(200, 200, 200, 1);
}

article {
background: rgba(200, 200, 200, .8);
}

aside {
background: rgba(200, 200, 200, .6);
}

footer {
background: rgba(200, 200, 200, .4);
}

下面是同样的 fiddle 。 http://codepen.io/anon/pen/bAayc

最佳答案

justify-content: center用于水平对齐。

对于垂直居中对齐,您有两种可能性:

  1. 将所有父元素声明为 100% 高度。那就是<body style="height:100%"> <html style="height:100%"> .否则它只是父元素的 100%,其大小刚好适合所有内容。
  2. 确定 flex 容器的位置fixedabsolute :

.flex-container {
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
height:100%;
width:100%;
position:absolute;
}

关于html - 为什么我的容器不是垂直和水平居中对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24933779/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com