垂直居中的元素在顶部留空 space

Question

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

.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 将参与正常的布局流，扩展它们的容器高度并在顶部分配额外的 space 和底部，如有必要。它们不会做那些事情——它们是绝对定位的，不会影响 .cn-container 元素的大小。就好像他们根本不存在一样。

这就是为什么你看到你所看到的 - .cn-container 的高度为零，幻灯片只是在视觉上悬挂在它们静态放置时应该在的位置。如果您指定 left、top、right 或 bottom，您将自由移动它们，使用最近的绝对或相对定位的祖先元素（或文件）为枢轴。

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

您最安全的选择是通过从 .cn-slide 规则中删除 position: absolute 来放弃绝对定位，并将 display: none 应用到您需要的那些 "inactive" 幻灯片从视图中隐藏，仅显示一张 "active" 幻灯片 (:target) display: block:

.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"。

垂直居中的元素在顶部留空 space

Vertical centered element leaves empty space on top

html

css

css-position

vertical-alignment