Question

我使用Swipe.js创建了一个包含多个屏幕的页面。滑动需要3个嵌套div的结构，并定义了一些样式。我想将一个元素70％放在其中一个屏幕的底部，但我发现它的Y位置在定义为百分比时仍保持在顶部。我的猜测是，包含div的高度在某种程度上仍为0，尽管我已将所有min-height属性设置为100％。

我现在正在桌面Chrome上进行测试。我的样式表：

/* required by swipe.js */
.swipe {
  overflow: hidden;
  position: relative;
  min-height: 100%; /* added this everywhere I could just in case */
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
  min-height: 100%;
}

.swipe-wrap > div {
  float: left;
  width: 100%;
  min-height: 100%;
  position: relative;
}

.page {
  min-height: 100%;
}

html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

/* element I want to position */
.myElement {
    position: relative;
    width: 200px;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

体：

<div id="slider" class="swipe">
    <div class="swipe-wrap">
        <div class="page">
            <div class="myElement">
                <h1>I should be more than halfway down.</h1>
            </div>
        </div>
    </div>
</div>

结果是内部div水平居中，但垂直位于顶部（事实上，由于transform偏移而被切断）。

我尝试过使用flex和align-items: center。这确实有效。不过，我不确定是否可以使用flex定义任意相对位置。

Answer 1

请查看以下示例

＆＃13;

.swipe {
  overflow: hidden;
  position: relative;
   height: 100%;
 
}

.swipe-wrap {
  overflow: hidden;
  position: relative;
  height: 100%;

}

.swipe-wrap > .page {
display: table;
width: 100%;
height: 100%;
table-layout: fixed;
text-align: center;
}
.myElement{
	display: table-cell;
	vertical-align: middle;
}
.page {
  min-height: 100%;
}

html,body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

＆＃13;

<div id="slider" class="swipe">
    <div class="swipe-wrap">
        <div class="page">
            <div class="myElement">
                <h1>I should be more than halfway down.</h1>
            </div>
        </div>
    </div>
</div>

＆＃13;

无法在嵌套结构中定义div的相对垂直位置

1 个答案: