相关疑难解决方法(0)

Div水平中心和垂直中间

我想在body页面的水平中心和垂直中间对齐div .

css:

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

Run Code Online (Sandbox Code Playgroud)

我有这个HTML:

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

Run Code Online (Sandbox Code Playgroud)

现在它表现得像我想要的那样,但如果我调整浏览器的大小,它就会变得完全扭曲,也许这是因为绝对的定位.我正在展示一些屏幕截图:在调整大小的firefox中: 在此输入图像描述

调整大小的铬: 在此输入图像描述

在调整大小即: …

html css alignment vertical-alignment

Tap*_*ose

2012 03-11

16
推荐指数

2
解决办法

6万
查看次数

在FF，IE6和IE7中运行的HTML中垂直和水平居中的实用解决方案

在Firefox，IE6和IE7中可以正常使用的将HTML内容垂直和水平居中的实用解决方案是什么？

一些细节：

我正在寻找整个页面的解决方案。
您只需要指定要居中的元素的宽度。元素的高度在设计时未知。
最小化窗口时，仅当所有空白都消失时才出现滚动。换句话说，屏幕的宽度应表示为：

“ leftSpace宽度=（screenWidth-widthOfCenteredElement）/ 2” +
“ centeredElement宽度= widthOfCenteredElement” +
“ rightSpace宽度=（screenWidth-widthOfCenteredElement）/ 2”

和高度相同：

“” topSpace高度=（screenHeight-heightOfCenteredElement）/ 2“ +
” centeredElement高度= heightOfCenteredElement“ +
” bottomSpace高度=（screenWidth-heightOfCenteredElement）/ 2“