DIV元素水平和垂直居中

2023-01-25 14:36:25

在前端开发过程中，经常要对元素进行居中设置。一般有水平居中，和垂直居中。一般设置水平居中简单。基本是margin:0 auto，就可以了。但是垂直居中，我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用。

目前通用的解决办法是，使用绝对定位，然后设置left和top为50%。然后通过margin来设置。下面具体代码演示了一个简单的登录页面，然后使登录界面水平居中和垂直居中。代码如下：

<html>

    <head>

        <title>div元素水平和垂直居中</title>

        <style type="text/css">

        #login-container

        {

            width:400px;

            height:350px;

            background-color:#ddd;

            text-align:center;

            position:absolute;

            left:50%;

            top:50%;

            margin:-200px 0 0 -200px;

        }

        #login-container .login-title

        {

            padding-top:50px;

        }

        </style>

    </head>

    <body>

        <div id="login-container">

            <h3 class="login-title">用户登录</h3>

            <div>用户名:<input type="text" value=""/></div>

            <div>密&nbsp;&nbsp;&nbsp;码:<input type="text" value=""/></div>

        </div>

    </body>

</html>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

截图如下：

使用Chrome、Firefox和IE9以上浏览器中，改变浏览器的大小，div元素还是会垂直居中。所有不需要额外写JavaScript代码进行定位。后续会写到另外一个问题：在一个div中，不固定高度的图片如何垂直居中。另外jQuery UI的Dialog控件有一个bug就是，页面太长了，往下拉滚动条时，overlay的高度不能自动延伸。这里需要写代码进行控制，在全局js文件中，添加下面代码：

//hotfix.修正overlay在窗口发生onresize时，不调整位置

function update_widget_overlay_height() {

    var height = $(window).height() + $(window).scrollTop();

    $(".ui-widget-overlay").css({ "height": height });

}

$(window).scroll(function () {

    update_widget_overlay_height();

});

码农公寓

相关文章