html - 垂直居中的元素在顶部留下空白空间

Question

我用了this线程在我的网站页面上垂直居中元素。它可以工作，但在顶部留下很大的空白空间，我不明白为什么。

.wrappert {
  height: 100%;
  width: 100%;
  display: table;
}

.wrapper {
  height: 100%;
  vertical-align: middle;
  display: table-cell;
  text-align: center;
}

.cn-container {
  width: 60%;
  /* min-width: 600px; */
  max-width: 820px;
  margin: 10px auto 0 auto;
  text-align: left;
  position: relative;
}

.cn-slide{
	text-align: center;
	position: absolute;
	left: 0px;
	padding-top: 80px;
	margin: 0 5%;
	width: 90%; /* 738px fixed*/
	opacity: 0;
}

.cn-slide:target{
	opacity: 1;
	z-index: 1000;
}

<div class="wrappert">
  <div class="wrapper">
    <div class="cn-container">
      <div class="cn-slide" id="slide-main">Lorem ipsum dolor sit amet.</divv>
      <div class="cn-slide" id="slide-main">Nam dapibus euismod ex egestas dictum.</divv>
      <div class="cn-slide" id="slide-main">Interdum et malesuada fames ac ante ipsum primis in faucibus.</divv>
    </div>
  </div>
</div>

网址是http://www.glamparrucchieria.com

Answer 1

您错误地假设您的 .cn-slide 元素及其 position: absolute 将参与正常的布局流，扩展它们的容器高度并分配额外的如有必要，在顶部和底部留出空间。它们不会做那些事情——它们是绝对定位的，不会影响您的.cn-container 元素的大小。就好像它们根本不存在一样。

这就是为什么您会看到您所看到的——.cn-container 的高度为零，并且幻灯片只是在视觉上悬卡在它们静态放置时应该在的位置。如果您指定 left、top、right 或 bottom，您可以自由移动它们，具有最近的绝对或相对定位的祖先元素(或文档的一 Angular )作为枢轴。

如果您能想象的话，这有点像每张幻灯片都有一个视觉透明层，每张幻灯片都位于页面其余部分的前面。

您最安全的选择是通过从您的 .cn-slide 规则中删除 position: absolute 来放弃绝对定位，并应用 display: none对于那些需要从 View 中隐藏的“非事件”幻灯片，只显示一张带有 display:block 的“事件”幻灯片 (:target):

.cn-slide {
     display: none; /** 'disable' each slide */
     position: initial; /** or just make sure there is no absolute positioning, this is just to illustrate static positioning, if you don't have `position: absolute` applying for this selector, you don't need this rule. */
}
.cn-slide:target {
     display: block; /** enable the 'current' slide */ 
}

结合以上内容，您的页面应该看起来像您想要的那样。请记住，简单地说，绝对定位会在其他页面元素的前面或后面创建一个新层。阅读 "CSS basic box model"如果你想学习理论。