CSS实现div居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS实现div居中</title>
<style>
/*外层div居中*/
#main {
position: absolute; /*极为重要*/
background-color: blue;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F;
} #content {
position: absolute; /*极为重要*/
background-color: yellow;
width: 200px;
height: 100px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px; /*div内部文字居中*/
text-align: center;
line-height:100px; /*行间距和div高度相同*/
}
</style>
<body>
<div id="main">
<div id="content">
Sun
</div>
</div>
</body>
</html>
CSS实现div居中的更多相关文章
- 用CSS控制DIV居中失效的解决方法
1.一般情况下DIV居中失效是因为没写DTD语句 在页面的最上方加上: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- css使div居中
每次想要使div居中都会设置position:absolute;,发现设置其他控件位置时会出现问题,所以采用以下办法: margin:0 auto;
- CSS动态控制DIV居中
1.所谓的动态:就是即使手动去拖拉浏览器,DIV还是会自动居中 2.之前一直以为这个事情是JavaScript做的, 步骤:通过先获取页面的Height和Width, 然后定义DIV的Height和W ...
- 如何通过CSS让DIV居中对齐
给Div对应的CSS的添加如下设定即可: MARGIN-RIGHT: auto; MARGIN-LEFT: auto;
- 【转】div居中代码 DIV水平居中显示CSS代码
原文地址:http://www.divcss5.com/rumen/r622.shtml 如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢? 需要的主要css代码有两个,一个为tex ...
- HTML CSS 中DIV内容居中汇总
转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...
- 【转】CSS中怎么让DIV居中
来源:http://www.cnblogs.com/DebugLZQ/archive/2011/08/09/2132381.html CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的 ...
- CSS中怎么让DIV居中(转载)
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
- CSS中怎么让DIV居中
CSS 如何使DIV层水平居中 今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性, 网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题. 可 ...
随机推荐
- 数学概念——F 概率（经典问题）birthday paradox
F - 概率(经典问题) Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit S ...
- Appium移动自动化测试（一）--安装Appium(转)
Appium移动自动化测试(一)--安装Appium 2015-05-30 17:48 by 虫师, 70668 阅读, 13 评论, 收藏, 编辑 Appium 自动化测试是很早之前就想学习和研究的 ...
- angularjs简单实现$http.post（CORS）跨域及$http.post传参方式模拟jQuery.post
1.开启angularjs的CORS支持 .config(function($httpProvider) { // CORS post跨域配置 $httpProvider.defaults.useXD ...
- Asp.Net Mvc后台数据验证自测小Demo
使用过MVC的同学一定不陌生MVC的模型绑定和模型校验,使用起来非常方便,定义好Entity之后,在需要进行校验的地方可以打上相应的Attribute,在Action开始时检查ModelState的I ...
- 关于STM32 RTC的使用
直接上代码,很爽. 1.RTC的首次初始化问题 使能时钟:RCC_APB1PeriphClockCmd(RCC_APB1Periph_PWR | RCC_APB1Periph_BKP, ENABLE) ...
- XMPPFrameWork IOS 开发（二）- xcode配置
原始地址:XMPPFrameWork IOS 开发(二) 译文地址: Getting started using XMPPFramework on iOS 介绍 ios上的XMPPFramewor ...
- ORACLE功能GREATEST功能说明具体实例
1 语法 GREATEST(expr_1, expr_2, ...expr_n) 2 说明 GREATEST(expr_1, expr_2, ...expr_n ...
- Weibo SSO认证 和初次请求数据
在进行SSO请求之前 我们要先去新浪微博的开放平台http://open.weibo.com/进行创建应用.以便得到appKey 和AppSecret. 点击创建应用 .进行资料填写 在这里 App ...
- Linux后台开发面试问题汇总
个人从事安全后台开发,当然是linux环境下的了.举几个常见的问题.1. 数据结构基础.比如实现一个最简单的哈希表.2. 操作系统基础.linux进程模型,堆/栈的区别,大概的位置,各往哪个方向生长, ...
- XML 序列化与PULL解析
简介 Pull解析XML XmlPullParser解析器的运行方式与SAX解析器相似.它提供了类似的事件(开始元素和结束元素),但需要使用parser.next()方法来提取它们.事件将作为数值代码 ...