css - 如何与响应式 div 垂直对齐（无高度/宽度）？

Question

我到处找（好几天了..），但找不到适合我的解决方案，所以我在这里..

我创建了某种正方形，分为 4 个 div，我都想要响应的正方形。

这是一张图

由于无法设置任何 div 高度，因此无法在中心获取“text-slider”和“text-produits”div 的文本。有人知道怎么做这个吗 ？预先感谢！

.slider {
  display: table;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: 100%;
  justify-content: center;
  position: relative;
}

.slider-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.produits {
  display: table;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  height: auto;
  justify-content: center;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

@media screen and (min-width: 850px) {
  .text-slider {
    display: table-cell;
    width: 30%;
    vertical-align: middle;
    text-align: center;
  }
  .grid-cuisine {
    display: table-cell;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 45%;
  }
  .grid-produits {
    display: table-cell;
    width: 30%;
    justify-content: center;
  }
  .text-produits {
    display: table-cell;
    width: 45%;
    vertical-align: middle;
    text-align: left;
    padding: auto;
  }
}

<div class="row slider d-flex justify-content-center" id="photos">

  <div class="text-slider">
    <div>
      Nunc euismod eget...
    </div>
  </div>

  <div class="grid-cuisine">
    <div class="slider-wrapper">
      ...
    </div>
  </div>

</div>

<div class="row produits d-flex justify-content-center" id="produits">

  <div class="grid-produits">
    <img src="images/combo-alpha.svg" alt="..." class="image-produits">
  </div>

  <div class="text-produits">
    Lorem ipsum dolor...
  </div>

</div>

Answer 1

您可以为此使用 flexbox - 我在下面评论了 css：

* {
  box-sizing: border-box;
}

.container {
  display: flex;           
  flex-direction: row;   /* align children in rows */
  flex-wrap: wrap;       /* allow wrapping of children for multiple rows */
  width: 50%;            /* change to width you want */
  margin: 0 auto;      

  border-left: 5px solid black;
  border-bottom: 5px solid black;
}

.container>div {
  border-right: 5px solid black;
  border-top: 5px solid black;
  padding:20px;
  
  display:flex;          /* make children flex too for centering */
  
  align-items:center;    /* vertical center */
  justify-content:center; /* horizontal center */

}

.left-col {
  width: 30%;
}

.right-col {
  width: 70%;
}

<div class="container">

  <div class="left-col">
    top left content over multiple lines
  </div>

  <div class="right-col">
    top right
  </div>

  <div class="left-col">
    bottom left content over multiple lines
  </div>

  <div class="right-col">
    bottom right
  </div>

</div>

Answer 2

网格 + 弹性

html, body {
     margin: 0;
     height: 100% 
}
 .grid-container * {
     border: 1px solid #ccc;
}
 .grid-container div {
     display: flex;
     justify-content: center;
     align-items: center 
}
 .grid-container div:after {
     content: attr(class);
     color: #888;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     font-family: arial;
}
 .grid-container {
     display: grid;
     height: 100%;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: 1fr 1fr;
     grid-template-areas: '. .' '. .';
}

<div class='grid-container'>
	<div>Text Slider</div>
	<div>Grid-cuisine</div>
	<div>Grid Produits</div>
	<div>Text-produits</div>
</div>