如何垂直堆叠居中的div

Posted 2023-03-29

【中文标题】如何垂直堆叠居中的div

【英文标题】：How to stack centered divs vertically

【发布时间】：2019-07-13 22:46:54

【问题描述】：

我似乎无法找到一种方法来垂直堆叠我的 div，同时仍然将它们对齐在页面的中心。

这是我当前的 html：

.loading-page 
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;


.loading-page .image-container 
  position: relative;
  display: inline-block;


.loading-page .image-container .image-grey 
  display: block;
  -webkit-filter: grayscale(100%);
  filter: grayscale(1);


.loading-page .image-container:after 
  position: absolute;
  content: "";
  top: 0;
  left: 0%;
  width: var(--image-load);
  height: 100%;
  background-position: top left;


.counter 
  text-align: center;
  position: relative;
  width: 200px;


.counter h1 
  color: black;
  font-size: 60px;
  font-weight: bold;
  margin-top: -10px;
  margin-bottom: -10px;


.counter hr 
  background: #000000;
  border: none;
  height: 1px;

<div class="loading-page">

  <div class="image-container" style="--image-load: 50%;">
    <style>
      .image-container:after 
        background-image: url(http://i.imgur.com/bZt9ZwE.png);
      
    </style>
    <img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png" />
  </div>
  <div class="counter">
    <h1>50%</h1>
    <hr/>
  </div>

</div>

一个工作示例：

JsFiddle

目标是“50%”文本位于图像下方，同时两个 div 居中，垂直和水平。图像大小将是动态的，因此我不能只设置固定宽度/高度的所有内容并使用填充。

【问题讨论】：

哪个进度条？

“进度条”，它只是一个下划线。实际上，我想我会从问题中删除它，因为它没有任何作用。

【参考方案1】：

将flex-direction:column; 设置为.loading-page

body
  margin:0px;


.loading-page 
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


.loading-page .image-container 
  position: relative;
  display: inline-block;


.loading-page .image-container .image-grey 
  display: block;
  -webkit-filter: grayscale(100%);
  filter: grayscale(1);


.loading-page .image-container:after 
  position: absolute;
  content: "";
  top: 0;
  left: 0%;
  width: var(--image-load);
  height: 100%;
  background-position: top left;


.counter 
  text-align: center;
  position: relative;
  width: 200px;


.counter h1 
  color: black;
  font-size: 60px;
  font-weight: bold;
  margin-top: -10px;
  margin-bottom: -10px;


.counter hr 
  background: #000000;
  border: none;
  height: 1px;

<div class="loading-page">

  <div class="image-container" style="--image-load: 50%;">
    <style>
      .image-container:after 
        background-image: url(http://i.imgur.com/bZt9ZwE.png);
      
    </style>
    <img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png" />
  </div>
  <div class="counter">
    <h1>50%</h1>
    <hr/>
  </div>

</div>

【参考方案2】：

给你！ 提示：不要使用像素（px），它们不能响应...相反，使用百分比作为度量单位以使其响应。

编辑：我更新了我的答案......现在它是响应式的。希望对您有所帮助！

    .loading-page 
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;


.loading-page .image-container 
  position: relative;
  display: inline-block;


.loading-page .image-container .image-grey 
  display: block;
  -webkit-filter: grayscale(100%);
  filter: grayscale(1);


.loading-page .image-container:after 
  position: absolute;
  content: "";
  top: 0;
  left: 0%;
  width: var(--image-load);
  height: 100%;
  background-position: top left;


.counter 
  text-align: center;
  position: static;
  width: 200px;


.counter h1 
  color: black;
  font-size: 60px;
  font-weight: bold;
  margin-top: 5%;
  margin-bottom: -5%;


.counter hr 
  background: #000000;
  border: none;
  height: 1px;

<div class="loading-page">

<div class="image-container" 
		 style="--image-load: 50%;">
	<style>.image-container:after  background-image: url(http://i.imgur.com/bZt9ZwE.png);</style>
	<img class="image-grey" src="http://i.imgur.com/bZt9ZwE.png"/>
</div>
<div class="counter">
  <h1>50%</h1>
<hr/>
</div>

</div>
   

【讨论】：

即使您的解决方案很好，请详细说明您为使其正常工作所做的工作。 （即使我知道你添加了绝对位置：p）

确实适用于小提琴的精确图像，如果我们改变尺寸（可能是 250x250px）就不起作用。文字在图像上方。还是我在解决方案中遗漏了什么？

我更新了我的答案...现在它是响应式的...您可以更改图片的大小...没关系 :D 尝试一下，让我知道它是否有效

很高兴它成功了 :) 将它标记为有效的，这样我们就可以帮助更多人解决同样的问题！干杯:)