如何让div上下左右都居中
在做登陆页面的话，需要login的div 上下左右都居中。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" >
<head>
<title>居中Demo</title>
</head> <mce:style type="text/css" title="currentStyle" media="screen">
<!--
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
-->
</mce:style>
<style type="text/css" title="currentStyle" media="screen" mce_bogus="1">
#divcenter{
position:absolute;/*层漂浮*/
top:50%;
left:50%;
width:300px;
height:300px;
margin-top:-150px;/*注意这里必须是DIV高度的一半*/
margin-left:-150px;/*这里是DIV宽度的一半*/
background:yellow;
border:1px solid red;
}
</style>
</head>
<body>
<div id="divcenter">
this is a test
</div>
</body>
</html>
参考地址：http://blog.csdn.net/carlfan/article/details/4579590参考地址：
如何让div上下左右都居中的更多相关文章
- css+div上下左右自适应居中
主要记录自己日常积累的布局相关的东西,持续更新中. 1.登录框上下左右自适应居中 以前想要把登录表单始终放置在页面的中间,花了不少心思,一直以来用的解决方法都是用js,感觉有点麻烦不是很好,于是在网上 ...
- html 上下左右都居中
给要居中的图片或者链接所在的div 设置例如以下属性 width: px; height: wd=px&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqI ...
- 小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
- 绝对定位上下左右都为0 margin为auto为什么能居中
老规矩,先来一段废话,我大学刚入门的时候觉得CSS很简单,记一记就会了,不就是盒模型嘛,现在想来觉得自己那时候真的很自以为是哈哈.但是随着工作沉淀,我明白了任何技术都有着它的深度和广度,正是因为不少人 ...
- 用CSS让DIV上下左右居中的方法
转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...
- 使图片相对于上层DIV始终水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何让图片相对于上层DIV始终保持水平、垂直都居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
随机推荐
- mysql 利用binlog增量备份，还原实例
mysql 利用binlog增量备份,还原实例 张映 发表于 2010-09-29 分类目录: mysql 标签:binlog, mysql, mysqldump, 增量备份 一,什么是增量备份 增量 ...
- ORA-29339错误解决办法
create tablespace TBS_JACK_16k blocksize 16k datafile '/u01/app/oracle/oradata/orcl/TBS_JACK_32K_01. ...
- yii2框架安装
注意:先把php.ini里面的php_openssl.dll扩展打开 1.下载yii2框架的文件包yii-advanced-app-2.0.7 2.打开路径为advanced下面的init.bat ...
- tomcat 启动时参数设置说明
使用Intellij idea 其发动tomcat时会配置启动vm options :-Xms128m -Xmx768m -XX:PermSize=64M -XX:MaxPermSize=512m. ...
- xUtils框架
我要为大家推荐的是一个Android基于快速开发的一个框架——xUtils,它是在aFinal基础上进行重构和扩展的框架,相比aFinal有很大的改善.同时,如果如果你的应用是基于网络的,那么只要处理 ...
- 结对2.0--复利计算WEB升级版
结对2.0--复利计算WEB升级版 复利计算再升级------------------------------------------------------------ 客户在大家的引导下,有了更多 ...
- DAO模型设计实现数据的 增，删，改，查方法
连接数据库方法,及反射获取数据,以前的方法相同,测试类 是在DAO模型下建立的 ------------------------------------------------------------ ...
- wpf的研究和反思
WPF的研究和反思 目前是否适合使用wpf WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于.NET F ...
- Uva 12186 工人的请愿书
题目链接:https://uva.onlinejudge.org/external/121/12186.pdf 题意: 给出一个树状关系图,公司里只有一个老板编号为0,其他人员从1开始编号.除了老板, ...
- JS 滚动效果
地址: https://github.com/aamirafridi/jQuery.Marquee <script language="JavaScript" src=&qu ...