无法将隐藏的div对齐以在可见性上垂直和水平出现在页面中心
[英]Can't align the hidden divs to appear at the center of the page vertically and horizontally on visibility
问题描述
I can't align my hidden divs at the center of the page. 
我无法将隐藏的div对准页面中心。
If I give position them to relative , the scroll increases as I move to one page to another (ie that div is not aligned vertically to the center of the page) 如果我将它们的位置设为相对，则当我将一页移到另一页时滚动会增加（即该div未垂直于页面中心对齐）
Should I place all the three divs in one container div?? 我应该将所有三个div放在一个容器div中吗？
Please help!!! 请帮忙！！！
Many thanks in advance.. 提前谢谢了..
<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>
The css I am using is: 我正在使用的CSS是：
.page {
position: absolute;
visibility:hidden;
}
The javascript I used is: 我使用的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>
3 个解决方案
解决方案1
0 已采纳 2013-05-18 16:54:44
This is how I would center your div with the current set up DEMO http://jsfiddle.net/kevinPHPkevin/g8r7Z/ 这就是我将使用当前设置的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;
}
解决方案2
0 2013-05-18 16:56:29
center a element using absolute positioning. 使用绝对定位将元素居中。 height and width won't affect the results. 高度和宽度不会影响结果。
.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 */
}
the center alignment holds even when the window resizes 即使窗口调整大小，中心对齐也会保持
解决方案3
-1 2013-05-18 16:43:41
If you want to center something with absolute position, use the following: 如果要以绝对位置为中心居中，请使用以下命令：
.page {
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
margin: -25% 0 0 -25%; /* should be -50% of width/height. */
}
Of course you should change width and height to your desire. 当然，您应该根据自己的喜好更改width和height 。 As the comment says: The margin-top should be height * -0.5 and margin-left should be width * -0.5 . 就像评论说的那样： margin-top应该是height * -0.5 ， margin-left应该是width * -0.5 。
Here is a demo . 这是一个演示 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.