当 flexbox 内容垂直居中时如何修复滚动？ [复制]

Posted 2023-03-05

【中文标题】当 flexbox 内容垂直居中时如何修复滚动？ [复制]

【英文标题】：How do I fix scrolling when flexbox content is vertically centered? [duplicate]

【发布时间】：2022-01-02 17:42:08

【问题描述】：

我想要实现的是当视口高于内容时，内容应该垂直居中。当视口不够高，内容溢出时，父级应提供垂直滚动条。

当我将 flexbox 内容对齐到中间并将内容设置为滚动时，它不仅会忽略内容边距，还会在顶部截断（鉴于视口比内容短）。有没有办法解决这个问题？

html, body 
    height: 100%;

body 
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;

.container 
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;


.content 
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

【问题讨论】：

对齐项目：安全中心；将是要使用的值，如果浏览器理解它，如果不是，则使用子元素本身的边距而不是对齐项。

【参考方案1】：

align-items: safe center 应避免儿童开箱。

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

安全

与对齐关键字一起使用。如果选择的关键字意味着项目溢出对齐容器导致数据丢失，则项目将被对齐，就像对齐模式已启动一样。

html, body 
    height: 100%;

body 
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;

.container 
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: safe center;


.content 
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

如果您的浏览器不支持对齐的安全/不安全关键字，那么您可以使用自动边距：

html, body 
    height: 100%;

body 
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;

.container 
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row; 
    padding:10px 0;


.content 
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin:auto 10px;
    border-radius: 10px;

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

【讨论】：

我最喜欢的浏览器不支持，但为解决方法点赞！非常感谢！