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

 

DIV元素水平和垂直居中的更多相关文章

  1. 让div等块级元素水平以及垂直居中的解决办法

    一.背景 我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将 ...

  2. 文字在div中水平和垂直居中的的css样式

    文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 & ...

  3. div的水平和垂直居中

    CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...

  4. HTML技巧篇：实现元素水平与垂直居中的几种方式

    如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题. 1)单行文本的居中 主要实现css代码: 水平居中:text-align:center;垂直居中:l ...

  5. 使文字在div中水平和垂直居中的的css样式为，四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  6. css 宽高自适应的div 元素 如何居中 垂直居中

    在我们 编写css 样式的时候经常会遇见一个问题 那就是一个 宽高未知的元素 要让他 垂直居中如何实现这个呢 下面是我常用的两种方法 上代码 下面的是 结构代码 <div class=" ...

  7. html,将元素水平，垂直居中的四种方式

    将元素垂直,水平居中分两种情况:一个是元素尺寸固定,二是元素尺寸不固定 一.尺寸固定 方法1:定位 ,50%,margin负距 .box{ width: 400px; height: 300px; b ...

  8. 元素水平垂直居中（transform，margin，table-cell，jQuery）

    1.水平居中 .div{ margin:0 auto; (或者 margin:auto;) width:500px; height:300px; } 2.使用margin水平垂直居中 方式一: .di ...

  9. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

随机推荐

  1. SpringMVC4零配置--web.xml

    servlet3.0+规范后,允许servlet,filter,listener不必声明在web.xml中,而是以硬编码的方式存在,实现容器的零配置. ServletContainerInitiali ...

  2. 安装cocoaPods的详细步骤

    先大概说下安装的步骤: Xcode 这个是开发必须的, HomeBrew RVM Ruby CocoaPods 一.HomeBrew: 打开官网链接:http://brew.sh/index_zh-c ...

  3. IIS 连接 oracle报Oracle.DataAccess版本错误解决办法

    通过IIS连接oracle时报“Could not load file or assembly 'Oracle.DataAccess, Version=2.112.3.0, Culture=neutr ...

  4. iOS判断对象相等 重写isEqual、isEqualToClass、hash

    相等的概念是探究哲学和数学的核心,并且对道德.公正和公共政策的问题有着深远的影响. 从一个经验主义者的角度来看,两个物体不能依据一些观测标准中分辨出来,它们就是相等的.在人文方面,平等主义者认为相等意 ...

  5. / fluxChatDemo / 系列 ——fluxDemoChat 组件编写

    还是用各部分来表示过程吧,没文采,就先这样记着吧 嘻嘻 梳理问题: 编写es6风格的组件时,需要引入import React from ‘react’ 然后页面就华丽丽的展示出了我写的1.2两个字 在 ...

  6. STM32_RTC君

    五一假期已过,大家是否还像五一五二五三那样快乐呢??答案就交给你们自己寻找了哈..说到五一..就从五一开始的那一刻起..就开始计时着..到五一假期结束..呵呵..在这里,智商和情商比我高的人估计又猜到 ...

  7. 一个flex buider 3 在eclipse下不能编译的问题解决

    今天处理一个遗留的项目:项目使用了flex作为界面,装好flex Builder 3 并添加插件到eclipse,eclipse使用3.7版本. 导入项目,编译,发现编译时候出现 Errors run ...

  8. php+ajax..转

    php+ajax 登录注册页面 主要是登录注册功能,前端后台验证没有什么,这个大家可以自己加上去,比如过滤啊,正则啊等 还是先放图吧 这是登录及注册界面  点击注册切换到注册界面,点击登录切换到登录界 ...

  9. 深入super，看Python如何解决钻石继承难题 【转】

    原文地址 http://www.cnblogs.com/testview/p/4651198.html 1.   Python的继承以及调用父类成员 python子类调用父类成员有2种方法,分别是普通 ...

  10. 浅谈Js对象的概念、创建、调用、删除、修改！

    一.我们经常困惑,对象究竟是什么,其实这是一种思维,一种意识上的东西,就像我们都说    世界是有物质组成的道理一样,理解了下面的几句话!对象也不是那么抽象!    1.javascript中的所有事 ...