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 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

收集两种垂直居中的代码

分两套看 holder的 display:table holder div的 display:table-cell; vertical-align:midd...

1847
来自专栏性能与架构

微信小程序示例 - 视图容器

滑块视图容器 swiper ? 代码结构 <swiper> <swiper-item> <image src="{{item}}"/> ...

3338
来自专栏码农阿宇

HTML基础加强

1. 什么是浏览器:解释和执行HTML源码的工具。 2. 什么是静态页面,什么样的页面是动态页面? 静态页面:htm,html(直接读取) 动态网页:asp...

32710
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:手机应用的TextTabBar快速实现方式

设置控件字体的颜色,将该属性设置为“95, 100, 110”,表示RGB颜色,如图2;

824
来自专栏做全栈攻城狮

.Net程序员快速学习安卓开发-布局和点击事件的写法

我们新建一个layout布局文件时,默认就是相对布局。相对布局是相对于非相对布局来说的。顾名思义,相对布局就是 相对于某些控件位置的布局。所有的控件都是相对位置...

1214
来自专栏杨龙飞前端

checkbox的常见问题

2205
来自专栏技术总结

Hybird App之选择器详解(二)

2396
来自专栏ytkah

如何用<dl>标签做表格而不用table标签

  我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,...

3136
来自专栏一“技”之长

标签之美十——用户交互元素 原

任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。

753
来自专栏十月梦想

HTML5之canvas画板介绍

• canvas 其实对于HTML来说很简单,只是一个标签元素而已,自己并没有行为,

1602

扫码关注云+社区

领取腾讯云代金券