CSS Flexbox 居中对齐
Posted
技术标签:
【中文标题】CSS Flexbox 居中对齐【英文标题】：CSS Flexbox Align Center 【发布时间】：2020-07-27 10:10:13 【问题描述】：我正在尝试将 flex 框中的内容对齐（垂直和水平）。在我的示例中，只要屏幕足够大，它就可以工作。
问题：
-
当“.wrapper”类中的内容大于 100vh 时。内容将在顶部被剪切。
当我将“.wrapper”设置为“100vh”并添加“.header”div 时，该div 应该从“100vh”中排除，否则我将得到一个滚动条。
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>FlexBox</title>
<meta name="infoription" content="">
<style>
*
margin: 0;
padding: 0;
body
background-color: #f8f9fa;
font-family: Roboto,Helvetica,Arial,Lucida,sans-serif;
color: #55595c;
.wrapper
display: flex;
justify-content: center;
align-content: center;
height: 100vh;
flex-wrap: wrap;
.content
background-color: #ffffff;
max-height: 350px;
max-width: 300px;
min-height: 350px;
min-width: 300px;
margin: 10px;
position: relative;
border: 1px solid #dfdfdf;
border-radius: 0.25rem;
.content:after
/* background: none repeat scroll 0 0 transparent; */
bottom: 0;
content: "";
display: block;
height: 10px;
left: 50%;
position: absolute;
background: #55595c;
transition: width 0.4s ease 0s, left 0.4s ease 0s;
width: 0;
.content:hover:after
width: 100%;
left: 0;
.thumb
background-color: #55595c;
height: 150px;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
.info
padding: 10px;
text-align: justify;
/* Responsive layout - screen is bigger than 1000px wide */
@media (min-width: 1000px)
.bodysize
width: 1000px;
margin: auto;
</style>
</head>
<body>
<div class="bodysize">
<div class="header">
<h1>Example Page</h1>
</div>
<div class="wrapper">
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[1]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[2]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[3]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[4]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[5]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[6]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[7]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[8]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
<div class="content">
<div class="thumb">
<h3>Thumbnail</h3>
</div>
<div class="info">
<h3>[9]</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis felis, dapibus ac tellus at, imperdiet consectetur ante. Mauris vulputate arcu nibh, et convallis felis mattis id.</p>
</div>
</div>
</div>
</div>
</body>
</html>示例图片：
Problem 1 - 滚动条因为“高度：100vh;”。
Problem 2 - 内容浮出浏览器顶部。也是因为“身高：100vh；”。
问题：
1) 如何设置动态高度，以便包装器始终填充剩余的可用空间？ 2）如果内容小于包装高度，则应垂直居中，但如果内容较大，则不需要居中。
有什么办法可以解决这个问题吗？
>>> 解决方案
我添加了 .bodysize，从包装器中删除了高度，并在包装器中添加了“flex-grow: 1”。 .bodysize 显示：弹性；弹性流：列；高度：100vh；
【问题讨论】：
您应该考虑使用媒体查询。 w3schools.com/css/css_rwd_mediaqueries.aspheight: 100vh; 应该移动到.bodysize，如果您希望所有内容在没有滚动条的情况下可见，您应该考虑调整字体大小以及您可能拥有的所有填充和边距
@ZohirSalak：当我将 100vh 移动到 .bodysize 时，内容不再垂直居中。就像我尝试“朱莉安娜·加西亚”的想法一样。
@ThetAung：这也是我的想法。我'，我已经使用了一个媒体查询。是否有可能进行媒体查询，上面写着“如果身体大于 100vh...”。这可能吗？
是的，您需要使用 flex 或其他方法将它们居中 .bodysize height: 100vh;display: flex;justify-content: center;align-content: center;flex-direction:column;
【参考方案1】：
尝试设置高度：auto;最大高度：100vh；在你的包装上。
否则，即使内部元素很少，您的包装器也会始终保持 100% 的高度。当内容超过 100vh 时应该会出现滚动条。
.wrapper
display: flex;
justify-content: center;
align-content: center;
height: auto;
max-height: 100vh;
flex-wrap: wrap;
【讨论】：
当内容大于屏幕高度（100vh）时，它可以工作并且内容不会浮出顶部屏幕（它不会被切断）。但是当内容小于屏幕高度时，它不会垂直居中（因为高度设置为“自动”。以上是关于CSS Flexbox 居中对齐的主要内容，如果未能解决你的问题，请参考以下文章
Flexbox 列对齐项目的宽度相同但没有包装器居中（仅限 css）
当其他元素居中对齐时，使用 Flexbox 将页脚与页面底部对齐
将一个项目居中对齐，其他项目与 Flexbox 对齐 [重复]
CSS Flexbox - 相对于父元素居中所有具有全高的子元素[重复]