代码之家 › 专栏 › 技术社区 › Pawel

当flexbox内容垂直居中时,如何修复滚动?

vertical-alignment scroll css

0

Pawel · 技术社区 · 4 年前

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

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 回复 | 直到 4 年前

1

G-Cyrillus 4 年前

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”>
内容的开头
<br/>
内容的中间部分
<br/>
内容结束
</部门>
</部门>
<div class=“content”>
内容开头:(((
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
内容的中间部分
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
内容结束
</部门>