如何让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 ...
随机推荐
- 创建sh文件
创建sh文件 #/bin/bash v_file=$ v_type=$ v_desc=$ touch $v_file echo '#================================== ...
- Caused by: org.hibernate.HibernateException: Connection cannot be null when 'hibernate.dialect' not set
docs.jboss.org文档示例代码:(http://docs.jboss.org/hibernate/annotations/3.5/reference/en/html_single/) sta ...
- JavaEE基础（十六）/集合
1.集合框架(去除ArrayList中重复字符串元素方式) A:案例演示 需求:ArrayList去除集合中字符串的重复值(字符串的内容相同) 思路:创建新集合方式 /** * A:案例演示 * 需求 ...
- 20145227《Java程序设计》第1次实验报告
20145227<Java程序设计>第1次实验报告 实验步骤与内容 命令行下Java程序开发 1.打开 cmd ,输入 mkdir 20145227 命令建立实验目录,然后输入 cd 20 ...
- snackbar初体验
底部弹出的部分就是snackbar的,右侧可添加一个action响应点击事件,遗憾的时貌似只能添加一个 这是华为mate8上面运行出来的效果,颜色之类的都是默认.不同的android版本样式稍有差异 ...
- c++中函数empty（）怎么使用
string s = "";if (s.empty()){ cout << "字符串为空..";}else{ cout << " ...
- SharePoint自动化系列——Manage "Site Subscriptions" using PowerShell
转载请注明出自天外归云的博客园:http://www.cnblogs.com/LanTianYou/ 你可以将普通的sites加入到你的site subscriptions中,前提是你需要有一个 Te ...
- 内存恶鬼drawRect
标题有点吓人,但是对于drawRect的评价倒是一点都不过分.在平日的开发中,随意覆盖drawRect方法,稍有不慎就会让你的程序内存暴增.下面我们来看一个例子. 去年的某天午后,北京的雾霾依旧像现在 ...
- 精通D3.js学习笔记（1）基础的函数
买了本吕大师的d3可视化.最近来学习一下,做个笔记. 1.选择元素 select(第一元素) 和selectAll(全部的元素) 类似css的选择器.也可以是dom选中的. var i ...
- 2014江西理工大学C语言程序竞赛高级组
Beautiful Palindrome Number 题意:求N里面有多少个符合要求的数字(数字要求:回文数,且前一半部分是不严格递增) 解法:打表 #include<bits/stdc++. ...