css 的flex容器,有一行标题时,怎样让下个容器全局居中

wgf4242
  • 90

让middle站在container正中心。(红框位置)

它只能在自己容器中居中。

<div class="container">
    <div id='title'>title</div>
    <div id='middle'>middle</div>
</div>

<style type="text/css">
.container {
    display: flex;
    flex-direction: column;
    height: 300px;
    border: 1px solid red;
}
#title {
    height: 150px;border: 2px solid green
}
#middle {
    font-size: 3rem;
    flex: 1 1 auto;
    align-self: center
}
</style>

20200612103129.png

目标是红框位置

20200612103129.png

回复
阅读 1.2k
3 个回答
JenK
  • 10.2k
✓ 已被采纳

html

<div class="container">
    <div id='title'>title</div>
    <div id='middle'>middle</div>
</div>

css

.container {
    display: flex;
    flex-direction: column;
    aign-items: center;
    justify-content: center;
    height: 300px;
    border: 1px solid red;
    position: relative;
}
#title {
    position: absolute;
    width:100%;
    height: 150px;
    border: 2px solid green;
    top:0;
}
#middle {
    font-size: 3rem;
    align-self: center
}
text-align: center

最简单的办法就是你的title脱离文档流使用定位。
剩下的css怎么做你懂吧?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏