如何使用CSS flex使元素占据页面的100％并在其中居中元素？

我正在尝试在https://stackoverflow.com/a/22218694/1175080中描述的以下解决方案。如何使用CSS flex使元素占据页面的100％并在其中居中元素？

或者，代替通过容器对准的内容，Flexbox的也可以与一个auto margin居中一个挠曲项当在柔性容器只有一个挠性项目（如示例在上面的问题中给出）。

这是我的解决方案。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
<style> 
 
    main { 
 
     display: flex; 
 
     height: 100%; 
 
     background: lightgreen; 
 
    } 
 

 
    section { 
 
     margin: auto; 
 
     background: yellow; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
    <main> 
 
     <section>Foo</section> 
 
    </main> 
 
</body> 
 
</html>

这似乎并没有工作。 main元素不会展开以占据页面的100％高度。我究竟做错了什么？这怎么能工作？

来源

2017-10-16 Lone Learner

分配html, body用100％的宽度&高度，像：

html, body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
}

在下面的代码片段看一看：

html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
main { 
 
    display: flex; 
 
    height: 100%; 
 
    background: lightgreen; 
 
} 
 

 
section { 
 
    margin: auto; 
 
    background: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Test</title> 
 
</head> 
 
<body> 
 
<main> 
 
    <section>Foo</section> 
 
</main> 
 
</body> 
 
</html>

希望这有助于！

来源

2017-10-16 06:08:47

被它的父母，在这种情况下是身体>使用HTML height:100vh

body { 
 
    min-height: 100vh; 
 
    margin: 0; 
 
} 
 
main { 
 
    display: flex; 
 
    height: 100vh; 
 
    background: lightgreen; 
 
} 
 

 
section { 
 
    margin: auto; 
 
    background: yellow; 
 
}

<main> 
 
    <section>Foo</section> 
 
</main>

来源

2017-10-16 06:09:23

主要元素将使用分配的空间。因此，请将body和html设置为100％，并且您应该是金色的。

html, body { 
    height: 100%; 
}

来源

2017-10-16 06:09:31 Parks

如何使用CSS flex使元素占据页面的100％并在其中居中元素？

回答

相关问题