专栏首页快乐八哥DIV元素水平和垂直居中

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是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();
});

.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; }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 让IE7/8使用CSS中first-child和last-child样式属性

    项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

    八哥
  • JavaScript中this关键字使用

    在Web开发中,前端掌握JavaScript,后台掌握PHP成为一个趋势。当然后台掌握C#/Java,当然还有Python,Ruby其中的一种,都是可以的。其实...

    八哥
  • JavaScript中的内置对象--Number对象

    JavaScript中的内置对象有以下6个: 1.Number对象 2.Boolean对象 3.Data对象 4.Math对象 5.String对象 6.Arr...

    八哥
  • 如何开发YUI3的扩展

    YUI是Yahoo发布的一个JS框架,虽然不如jQuery简单,但是如果你是要做一些复杂的事情的时候,有一个合适量级的框架还是能有用不少。

    大江小浪
  • 让IE7/8使用CSS中first-child和last-child样式属性

    项目最终效果如下图所示: ? 可以看出2个tab之间有一天分割线,这条分割线没有使用单独的div或者span。而是使用li标签的border-right。但是最...

    八哥
  • Android 应用基础知识

    叶应是叶
  • 【专业知识】深入理解Iphone成像原理

    现在我们的日常生活基本上离不开了LCD屏幕,手机,电脑,电视,等等。这里我们就来普及下屏幕的知识。 自Iphone4上市以来,什么IPS屏幕,什么asv屏幕,什...

    程序员互动联盟
  • 附018.K3S-ETCD高可用部署

    K3S是一个轻量级Kubernetes发行版。易于安装,内存消耗低,所有二进制文件不到40mb。

    木二
  • Java IO(IO流)-2

    IO流 第一部分 (OutputStreamWriter BufferOutputStream) 转换流 超类为Reader和Writer 是字符流通向字节流的...

    李家酒馆酒保
  • The type org.apache.http.NameValuePair cannot be resolved. It is indirectly referenced from requi...

    萬物並作吾以觀復

扫码关注云+社区

领取腾讯云代金券