javascript - 无法将隐藏的 div 对齐以在可见性上垂直和水平显示在页面中心

标签 javascript css html alignment

我无法将隐藏的 div 对齐到页面的中心。

如果我将它们定位到 relative ,滚动会随着我从一页移动到另一页而增加(即 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>

最佳答案

这就是我如何将您的 div 与当前设置 DEMO http://jsfiddle.net/kevinPHPkevin/g8r7Z/ 居中

#page1 {
    position:absolute;
    top:50%;
    right:0;
    left:0;
    background:#ccc;
    width:200px;
    margin:-50px auto 0 auto;
}

关于javascript - 无法将隐藏的 div 对齐以在可见性上垂直和水平显示在页面中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16626590/

相关文章:

php - 如何删除wordpress静态主页中的页面名称?

javascript - 单击后在 Json 上创建一个新对象(http.put)

javascript - 范围从 Promise 内部发生变化

html - CSS 行高属性问题

html - 如何使 Html 下拉列表向上而不是向下

html - div 标签内多个 div 标签的垂直滚动

javascript - 我有问题,我的组件无法更新第二个组件的属性 - Vuejs

javascript - react native 文本不环绕在 native 基本标题上

css - 在社交引擎中使用自定义布局?

javascript - Angular Material : How to select a specific mat-cell in mat-table?