html - 从顶部或底部以一定百分比定位动态大小的 div

Question

我有一个包含图像的 div，其想法是确保图像被缩放以适合窗口的宽度。效果很好，但是我无法正确水平放置图像；我想把它放在窗口底部的某个地方，但它粘在顶部。

我的HTML如下：

<div class="page" id=""><div id="imagewrap"><img id="test" src="myimage.png" width="100%"></div></div>

CSS是这样的：

#imagewrap {
    height: 100%;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    border:2px solid;
}

这适用于 Android 手机 (cordova)，因此任何建议都可以针对该渲染引擎 (webkit)

使用下面的一些评论后的当前版本，这些评论位于底部但不居中：

#centerdiv {
height: 100%;
margin-left: auto;
margin-right: auto;
border:2px solid;
width: 70%;

}
#imagewrap {
border:2px solid;
position: absolute;
bottom: 0; /** percentage FROM bottom here **/
width: 100%;
}

Answer 1

添加这个CSS：

#page {
  position: relative;
}

#imagewrap {
  position: absolute;
  bottom: 0; /** percentage FROM bottom here, currently this is at the bottom **/
}

请记住，这将与#pagediv 的底部相关。