CSS Flexbox 居中对齐答案

【问题标题】：CSS Flexbox Align CenterCSS Flexbox 居中对齐
【发布时间】：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.asp
height: 100vh; 应该移动到.bodysize，如果您希望所有内容在没有滚动条的情况下可见，您应该考虑调整字体大小以及您可能拥有的所有填充和边距
@ZohirSalak：当我将 100vh 移动到 .bodysize 时，内容不再垂直居中。就像我尝试“朱莉安娜·加西亚”的想法一样。
@ThetAung：这也是我的想法。我'，我已经使用了一个媒体查询。是否有可能进行媒体查询，上面写着“如果身体大于 100vh...”。这可能吗？
是的，您需要使用 flex 或其他方法将它们居中 .bodysize { height: 100vh;display: flex;justify-content: center;align-content: center;flex-direction:column;}

标签： html css flexbox responsive

【解决方案1】：

尝试设置高度：auto;最大高度：100vh；在你的包装上。

否则，即使内部元素很少，您的包装器也会始终保持 100% 的高度。当内容超过 100vh 时应该会出现滚动条。

.wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    height: auto;
    max-height: 100vh;
    flex-wrap: wrap;
}

【讨论】：

当内容大于屏幕高度（100vh）时，它可以工作并且内容不会浮出顶部屏幕（它不会被切断）。但是当内容小于屏幕高度时，它不会垂直居中（因为高度设置为“自动”。