绝对容器中的 CSS flex 布局答案

【问题标题】：CSS flex layout in absolute container绝对容器中的 CSS flex 布局
【发布时间】：2019-02-27 22:12:39
【问题描述】：

我有以下具有绝对高度的容器 (.full-width.section3) 的 HTML/CSS。但是，将内容居中是行不通的。由于我是 flex 模型的新手，有人可以向我解释一下，为什么三个孩子 divs 没有垂直居中？

body {
  margin:0;
  
}
.container {
  display:flex;
  flex-wrap:wrap;     
  height:100vh;
  background-color: white;
}
.full-width {
  width:100%;              
}

.full-width.section3{
	height: 795px;
}

.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
}

.full-width > .content > .third-parent > .third{
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width > .content > .third-parent > .third > img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text{
  position: absolute;
  width: 100%;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
    display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width > .content > .third-parent > .third > .middle-text > .list-div2  li{
   position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before{
  content: '\2022';
  margin-right: 10px;
}
.items-list2 {
  margin: 0;
  padding: 0;
}

<div class="container">
<div class="full-width section3">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=right">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
         </div>
       </div>
</div>
</div>

【问题讨论】：

我不完全确定我是否理解您在那里所做的事情。为什么您的图像或“中间文本”定位绝对？我认为你的问题已经开始了。要垂直居中，您还需要“align-items：center;” - 但你需要这个 flex-wrapper 而不是孩子

标签： html css flexbox css-position

【解决方案1】：

您将 flex 与绝对定位混合在一起。这会破坏子元素的 flex：

由于它是外流的，因此是 flex 的绝对定位子代容器不参与弹性布局。

来源：https://www.w3.org/TR/css-flexbox-1/#abspos-items

【讨论】：

【解决方案2】：

我不太清楚你想要实现什么，但 flex 布局不适合绝对定位的孩子

如果居中是问题，那么在 flexbox 中有可供您使用的选项。

  justify-content: center;
  align-items: center;

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
  background-color: white;
}

.full-width {
  width: 100%;
}

.full-width.section3 {
  height: 795px;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  text-align: center;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width>.content>.third-parent>.third>img {
  max-width: 100%;
  display: block;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before {
  content: '\2022';
  margin-right: 10px;
}

.items-list2 {
  margin: 0;
  padding: 0;
}

<div class="container">
  <div class="full-width section3">
    <div class="content">
      <div class="third-parent">
        <div class="third" id="one">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
            <div class="list-div2">
              <ul class="items-list2" id="list">
                <li>Entry A</li>
                <li>Entry B</li>
                <li>Entry C</li>
                <li>Entry D</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

你需要删除 position: absolute;对中间文本进行分类并添加 display: inline;使中间列居中

body {
  margin:0;
  
}
.container {
  display:flex;
  flex-wrap:wrap;     
  height:100vh;
  background-color: white;
}
.full-width {
  width:100%;              
}

.full-width.section3{
	height: 795px;
}

.full-width > .content > .third-parent{
  height: 100%;
  display: flex;
}

.full-width > .content > .third-parent > .third{
  position: relative;
  flex: 1 1 0px;
  width: 100%;
  border: 1px solid black;
}

.full-width > .content > .third-parent > .third > img{
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top:50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text{
  width: 100%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: auto;
  display: inline;
}


.full-width > .content > .third-parent > .third > .middle-text > .list-div2{
    display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width > .content > .third-parent > .third > .middle-text > .list-div2  li{
   position: relative;
  display: block;
  margin-bottom: 5px;
  padding: 10px;
  text-align: left;
  text-transform: uppercase;
  visibility: visible;
}

.list-div2 li::before{
  content: '\2022';
  margin-right: 10px;
}
.items-list2 {
  margin: 0;
  padding: 0;
}

<div class="container">
<div class="full-width section3">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=right">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Some headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=left">
        </div>
         </div>
       </div>
</div>
</div>

【讨论】：