使堆叠的绝对元素居中+使挠性柱垂直居中到窗口高度
使堆叠的绝对元素居中的方法有多种，其中一种常用的方法是使用CSS的flexbox布局。具体步骤如下：
- 创建一个父容器，并设置其为flex布局：
display: flex; - 设置父容器的主轴方向为垂直方向：
flex-direction: column; - 设置父容器的主轴和交叉轴上的内容居中对齐：
justify-content: center; align-items: center; - 将需要居中的绝对定位元素放置在父容器中。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /* 设置父容器高度为视口高度 */
background-color: #f5f5f5;
}
.absolute-element {
position: absolute;
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-element"></div>
</div>
</body>
</html>上述代码中，.container为父容器，.absolute-element为需要居中的绝对定位元素。通过设置父容器的justify-content和align-items属性为center，可以使绝对定位元素在垂直和水平方向上居中显示。
使挠性柱垂直居中到窗口高度的方法可以使用CSS的flexbox布局和一些额外的样式。具体步骤如下：
- 创建一个父容器，并设置其为flex布局：
display: flex; - 设置父容器的主轴方向为垂直方向：
flex-direction: column; - 设置父容器的主轴和交叉轴上的内容居中对齐：
justify-content: center; align-items: center; - 设置父容器的高度为窗口高度：
height: 100vh; - 设置挠性柱的高度为父容器高度的一半：
height: 50%;
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh; /* 设置父容器高度为视口高度 */
background-color: #f5f5f5;
}
.flexible-column {
height: 50%; /* 设置挠性柱高度为父容器高度的一半 */
background-color: #ff0000;
}
</style>
</head>
<body>
<div class="container">
<div class="flexible-column"></div>
</div>
</body>
</html>上述代码中，.container为父容器，.flexible-column为挠性柱。通过设置父容器的justify-content和align-items属性为center，以及设置父容器的高度为窗口高度的一半，可以使挠性柱垂直居中到窗口高度。
相关·内容
2回答
第一:左侧的3个按钮(.side-buttons)应该在窗口高度的中间(垂直)。
第二:有一个.headline div，它包含一个.svg元素和一个标题，应该堆叠起来并放置在该.svg元素的中间。我考虑过将.svg元素设置为position: relative;，并将标题设置为position: absolute;，但是当高度未定义时，我不知道如何将其居中。我该怎么做呢？或者有一
浏览 1提问于2017-02-12得票数 0
回答已采纳
我希望它们在容器中居中，所以我使用对齐内容: center;和对齐项: center;。如果有太多的内容不能并排显示的话，我还想让孩子们包装起来，所以我使用了flex: wrap;和对齐内容: center;。只要所有的内容都能在容器中正常工作，一切都可以正常工作。如果窗口确实很小，那么内容就会溢出容器，并且它确实会显示滚动条，但是第一个子窗口仍然在滚动区域之外。当对齐内容不是中心时，就不会发生这种情况。知道是什么原因造成的吗?如何解决？我还制作了一个代码页来说明这一点(使浏览器
浏览 1提问于2016-05-12得票数 2
我的网站()出了点小问题我试着给它一个宽度和一个高度，绝对地定位元素并抵消它们，但是它们失去了响应性。谢谢!
浏览 1提问于2014-04-25得票数 0
1回答
我有一个由标题和内容区域组成的流体布局。标题将占用窗口高度的10%，而内容区域将占用其余的90%。整个屏幕上的文本应该与窗口的高度成比例地缩放。此外，标题中的文本应垂直居中。到目前为止，我的情况如下：
我正在使用Em单位做相对大小的文本。每当调整窗口大小时，我就使用JavaScript来更改body元素
浏览 2提问于2013-05-30得票数 1
回答已采纳
3回答
它由一个带有(响应性的)背景图像的div和一个在该图像上以水平和垂直方向居中的标头组成。我已经成功地获得了图像，并使它具有响应性，并且以标题为中心，但是当窗口大小变小时，我的问题就出现了。我使用的是“位置:绝对”、“顶级”属性，并将其转换为“居中”，但只有在父容器中指定高度时，top属性才能工作。但是，当窗口缩小到图像开始缩小到
浏览 0提问于2018-06-27得票数 2
回答已采纳
我正在尝试在一个div中居中一个div。一开始，我想我尝试做水平居中，但这不起作用。我看了这篇文章的水平居中。#homepage {} position: absolute;} background: rgb(224,168,227); margin: 0 auto;由于某些
浏览 3提问于2015-09-09得票数 2
我试图为我的SVG实现以下目标：svg { height:100%;}这将使整个SVG画布处于<em
浏览 0提问于2021-03-22得票数 0
回答已采纳
所以，我是在一个设计框架内工作的，它大量地利用了直线高度来进行垂直对中。我目前有一个绝对定位的HTML元素，里面有垂直居中的文本/内容，当我作为兄弟添加另一个相同的元素时，我希望它占据相同的空间，但是改变兄弟姐妹的每一个(第一个和第二个)的线高，使它们升高/降低一点，显示为两个堆叠的
浏览 1提问于2015-04-28得票数 0
回答已采纳
4回答
#fade').remove();
//end poup
现在，每当用户点击有poplight类的元素时，上面的代码就会被执行，它应该会显示具有popup_block类的div，但在此之前调用了ajax函数，我对此没有问题，但div (具有popup_block类)的中心主义丢失了，或者当你看到有实现该div的中心主义的代码时，它看起来
浏览 4提问于2012-05-06得票数 4
回答已采纳
我需要为元素的top CSS属性赋值，即元素高度除以-2。我能用SASS \ Compass来做吗？
浏览 0提问于2013-03-30得票数 11
回答已采纳
5回答
我有一个简单的网站:固定宽度，可变高度，居中。我希望背景图像与内容的左下角对齐，如下所示： ___| |----------------------------------------------------------
如果浏览器窗口足够大，整个背景图像应该是可见的。如果它较小，图
浏览 1提问于2010-06-21得票数 1
回答已采纳
5回答
"height:400px;width:400px;"> Text</div>
我正在寻找一种方法，让#example进入#wrapper的中心
浏览 0提问于2011-10-03得票数 1
期望的结果是在容器的左上角有一个图标，该图标保持不动(固定顶部，不居中)，而当文本变长时，多行文本域扩展，使容器扩展。在容器的右侧还有一个垂直居中的图标。如果可以给一行中的不同元素提供不同的crossAxisAlignment (例如，一些开始，一些中心)，我将能够解决这个问题。如果有一种方法可以使行元素知道并匹配其最高同级元素的高度</
浏览 23提问于2021-07-17得票数 0
回答已采纳
我的目标是使图像在其容器内垂直和水平居中，并且图像在不改变原始纵横比的情况下占用尽可能多的空间。background-size: contain；background-position: center；background-repeat: norepeat；}不是一个选项，因为我需要将覆盖div附加到图像的角落使用背景将意味着包含的div不会精确地跟随图像大小。
这里尝试使用flexbox来实现这一点。不幸的是，它不能在Firefox
浏览 2提问于2014-09-26得票数 0
目前，两幅图像的对齐方式是水平居中。但是，我想要的是页面中心的两个图像。下面是我的代码：table,td { border-collapse: collapse;td {
padding
浏览 32提问于2019-11-05得票数 2
回答已采纳
我有一个使用引导的网络项目。有两列的布局。左列有图像，右边列有文本。文本应该垂直于图像的中心。第一个问题是如何使柱子保持相同的高度。我找到了以下工作解决方案： margin-bottom: -99999px; height:100%;为了使文本垂直居中display:table; display:tabl
浏览 0提问于2016-03-01得票数 0
回答已采纳
2回答
使用非常简单的标记，我需要：
因此，#wrapper必须采取所有可能的高度，将页脚推到#container的底部。内部的div必须保持他们的位置，所以只有他们的位置才会改变。(基本上只有元素的位置会发生变化，而不是它们的</e
浏览 2提问于2014-11-23得票数 0
5回答
这样你们中聪明的人就能告诉我一个更好的方法..。
我正在制作一个画作的查看器，它应该伸展到填满整个页面，准确地说是屏幕高度的90%。我想要在一幅画上淡入另一幅画，并将每一幅画放在屏幕中央。为了使这些画彼此淡入，我需要将它们放在“绝对”的位置，以防止它们堆叠。这就是问题所在。自从我将它们设置为绝对后，我用来居中包含div的每个方法都不起作用。部分问题是，我没有为画作设置任何宽度，因为
浏览 0提问于2012-02-21得票数 30
回答已采纳
重要的是，我使用grid-template-rows来定义元素的高度，因为我希望动态地保持比例的准确性。然而，我不知道如何让给定行的行高使其文本垂直居中。我求助于一些我不喜欢的老生常谈的填充东西。div>
浏览 20提问于2021-10-30得票数 0
回答已采纳
我无法将隐藏的div与页面中心对齐。如果我将它们的位置设置为相对，当我从一个页面移动到另一个页面时，滚动条会增加(即div不会垂直对齐到页面的中心)请帮帮我！ </div>我使用的css是： position: absolute;
v
浏览 3提问于2013-05-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
