CSS居中demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<!-- 自定义网页信息 -->
<title>CSS居中demo</title>
<link rel="shortcut icon" href=" " />
<base target="_blank" href=" " />
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<meta name="Copyright" content=" " />
<meta name="author" content="Pich" />
<!-- 外链样式表和脚本 -->
<link rel="stylesheet" type="text/css" href = " ">
<script type="text/javascript" src = " "></script>
<style>
* { margin: 0; padding: 0; }
/*公共样式*/
blockquote { text-align: center;background-color: #aaa; width: 50%;margin: 0 auto}
div { width: 70%; height: 100px; margin: 2% auto; background-color: #ccc; }
p { color: #c00; }
/*第1种垂直居中样式*/
.vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; }
/*第2种垂直居中样式*/
.vertical-2 p { line-height: 100px; text-align: center; }
/*第3种垂直居中样式*/
.vertical-3 { display: table; }
.vertical-3 p { vertical-align: middle; display: table-cell; text-align: center; }
/*第4种垂直居中样式*/
.vertical-4 { position: relative; }
.vertical-4 p { position: absolute; top: 40%; left: 25%; height: 20%; width: 50%; }
/*第5种垂直居中样式*/
.vertical-5 { position: relative; }
.vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 20%; margin: auto; }
/*第6种垂直居中样式*/
.vertical-6 { padding: 2% 0; height: auto;}
.vertical-6 p { display: block; padding: 4% 0; text-align: center; }
/*****************************************************************************************************/
/*第1种水平居中样式*/
.level-1{}
.level-1 p{margin-right: auto;margin-left: auto; width: 150px;text-align: center;line-height: 100px}
/*第2种水平居中样式*/
.level-2{text-align: center;}
.level-2 p{display: inline-block;width: 80%; }
/*第3种水平居中样式*/
.level-3{ }
.level-3 p{ position:absolute; left:50%; width:700px; margin-left:-350px} </style>
</head>
<body>
<!-- 页面主体 -->
<h1 style="text-align: center;color: #c00;">凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。</h1>
<br><br><br><br>
<blockquote>
/*第1种垂直居中样式*/<br>.vertical-1 { line-height: 100px; text-align: center; vertical-align: middle; }
</blockquote>
<div class="vertical-1">
<img src="1.png" alt="">
</div>
<blockquote>
/*第2种垂直居中样式*/<br>.vertical-1 p { line-height: 100px; }
</blockquote>
<div class="vertical-2">
<p>垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2垂直居中实例2</p>
</div>
<blockquote>
/*第2种垂直居中样式*/<br>.vertical-1 p{line-height: 100px;}
</blockquote>
<div class="vertical-3">
<p>垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3垂直居中实例3</p>
</div>
<blockquote>
/*第3种垂直居中样式*/<br>.vertical-3 { display: table; }<br>.vertical-3 p { vertical-align: middle; display: table-cell; }
</blockquote>
<div class="vertical-4">
<p>垂直居中实例4,注：vertical-align:middle这个属性一般情况下只对行内元素生效，对块级元素只有table-cell生效。</p>
</div>
<blockquote>
/*第5种垂直居中样式*/<br>.vertical-5 { position: relative; }<br>.vertical-5 p { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 20%; margin: auto; }
</blockquote>
<div class="vertical-5">
<p>垂直居中实例5适用：块级元素 但在IE版本低于7时不能正常工作</p>
</div>
<blockquote>
/*第6种垂直居中样式*/<br>.vertical-6 { padding: 2% 0; height: auto;}<br>.vertical-6 p { display: block; padding: 4% 0; }
</blockquote>
<div class="vertical-6">
<p>垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6垂直居中实例6</p>
</div>
<!-- ***************************************************************************************************** -->
<blockquote>
/*第1种水平居中样式:自动外边距实现居中*/<br>.level-1{}<br>.level-1 p{margin-right: auto;margin-left: auto; width: 150px;text-align: center;line-height: 100px}
</blockquote>
<div class="level-1">
<p>水平居中参考实例1</p>
</div>
<blockquote>
/*第2种水平居中样式*/<br>.level-1{text-align:center;}<br>.level-2 p{display: inline-block;background: #c00;width: 80%; }
</blockquote>
<div class="level-2">
<p>使用text-align属性，应用到body元素上即可。它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。在创建好布局必须的div之后，为body应用text-align属性：body的所有子孙元素都会被居中显示。我们就需要用再写一条规则，让其中的文本回到默认的居左对齐.另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。</p>
</div>
<blockquote>
/*第3种水平居中样式*/<br>.level-3{ }<br>.level-3 p{ position:absolute; left:50%; width:700px; margin-left:-350px}
</blockquote>
<div class="level-3">
<p>创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点</p>
</div>
</body>
</html>
<!--
made with ♥ by:
_
_ |_| _
|_| _____ |_|
_ / \ _
|_| / ____ \ |_|
/ / \ \
/ / \ \
|\___/ \/
\
\ /
\ /
| |
| |
\_____/
-->
CSS居中demo的更多相关文章
- 各种div+css居中方式调整（转载）
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS居中的实现用法实例
转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...
- CSS居中方法
css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...
随机推荐
- Qt 程序打包发布
Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,Qt 官方开发环境里自带了一个工具:windeployqt.exe.在Qt安装目录如:C:\Qt\Qt5.7. ...
- css-关于文本
1. 使用 text-overflow:ellipsis; 超出部分会变成省略号 http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow 1 ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- Redis Sentinel集群配置中的一些细节
今天在配置Redis集群,用作Tomcat集群的缓存共享.关于Redis集群的配置网上有很多文章,这里只是记录一下我在配置过程中遇到的一些小的细节问题. 1. 关于Protected Mode的问题 ...
- MFC如何读取XML
<?xml version="1.0" encoding="utf-8"?> <Cases> <case> <No&g ...
- ORA-12541:TNS:no listener 客户端tnsnames.ora配置，以及服务端listener.ora配置
需求:客户端(192.168.25.1)需要访问服务端(192.168.7.215)的Oracle库ORCL. 步骤一:配置客户端tnsnames.ora 步骤二:配置服务端listener.ora ...
- TFS API：三、TFS WorkItem添加和修改、保存
TFS API:三.TFS WorkItem添加和修改.保存 WorkItemStore:表示跟踪与运行 Team Foundation Server的服务器的工作项客户端连接. A.添加工作项 1 ...
- CentOS Yum 命令详解
总所周知,Redhat和Fedora的软件安装命令是rpm,但是用rpm安 装软件最大的麻烦就是需要手动寻找安装该软件所需要的一系列依赖关系,超级麻烦不说,要是软件不用了需要卸载的话由于卸载掉了某个依 ...
- 《Mastering.Ext.JS. 》书上主要示例都搞了个样子出来，纪念
- 转：SqlServer2012自增列值突然增大1000的原因及解决方法
原文链接:http://blog.csdn.net/phoenix36999/article/details/53304126 首先排除数据回滚及增加删除等操作. 按照这篇文章SQL Server 2 ...