[英]Can't align the hidden divs to appear at the center of the page vertically and horizontally on visibility
我無法將隱藏的div對准頁面中心。
如果我將它們的位置設為相對，則當我將一頁移到另一頁時滾動會增加（即該div未垂直於頁面中心對齊）
我應該將所有三個div放在一個容器div中嗎？
請幫忙！！！
提前謝謝了..
<body>
<div id ="page1" class="page" style=""visibility:visible>
content
<!-- also contains a button that hides this div and makes the
next div visible -->
</div>
<div id="page2" class="page">
content
<!-- also contains two buttons for back and next div -->
</div>
<div id ="page3" class="page">
content
<!-- contains two buttons for back and submit -->
</div>
</body>
我正在使用的CSS是：
.page {
position: absolute;
visibility:hidden;
}
我使用的JavaScript是：
<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr){
hideLayer(currentLayer);
document.getElementById(lyr).style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr){
document.getElementById(lyr).style.visibility = 'hidden';
}
</script>
這就是我將使用當前設置的DEMO http://jsfiddle.net/kevinPHPkevin/g8r7Z/來使div居中的方式
#page1 {
position:absolute;
top:50%;
right:0;
left:0;
background:#ccc;
width:200px;
margin:-50px auto 0 auto;
}
使用絕對定位將元素居中。 高度和寬度不會影響結果。
.center-align{
position:absolute;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
width: /* works with any width */;
height: /* works with any height */;
/* any other style wont effect it */
}
即使窗口調整大小，中心對齊也會保持
如果要以絕對位置為中心居中，請使用以下命令：
.page {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin: -25% 0 0 -25%; /* should be -50% of width/height. */
}
當然，您應該根據自己的喜好更改width和height 。 就像評論說的那樣： margin-top應該是height * -0.5 ， margin-left應該是width * -0.5 。
這是一個演示 。
將兩個div對齊，然后將兩個div水平和垂直居中
[英]Align two divs to be side by side and then center both divs horizontally and vertically
帶溢出的持有者中的div div：隱藏的卷軸垂直和水平滾動 - mousemove
[英]circle divs in holder with overflow:hidden scroll vertically and horizontally scroll - mousemove
即使將頁面向下滾動，也可以將div垂直居中並水平居中
[英]Center div vertically and horizontally center even when page scrolled down
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.