<!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的更多相关文章

  1. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  2. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  8. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  9. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

随机推荐

  1. 浅谈HTTP中Get与Post的区别

    引用自:http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET ...

  2. Application package 'AndroidManifest.xml' must have a minimum of 2 segments.

    看了源码就是packagename里面必须包含一个. 源码在: ./sdk/eclipse/plugins/com.android.ide.eclipse.adt/src/com/android/id ...

  3. 关于VPN的一些问题

    在今在外出差,必须得连上公司的数据库,那就得使用VPN了,设置起来还算比较简单(我是win10), 简单介绍一下: 打开设置或者直接点击右下角的

  4. SQL多表查询，消除表中的重复的内容

    看到朋友再写一个SQL语句:两个表a1表中有SN.SN2.TN,b1表有SM.SM2.TN2,若a1的SN中的数据和b1的SM中的数据是一致的,那么将a1中对应的数据修改成b1中对应的数据. upda ...

  5. tp框架之函数调用

    1.如果要在一个方法里面调用另一个方法,可以先用A方法实例化控制器 $m = A("控制器名"); ,然后根据方法名调用 $m->方法名(可传参数); 2.自定义函数库  ( ...

  6. 剑指Offer-【面试题02：实现Singleton 模式——七种实现方式】

    题目:设计一个类,我们只能生成该类的一个实例 package com.cxz.demo02; /** * Created by CXZ on 2016/9/13. */ public class Si ...

  7. Oracle临时文件

    临时数据文件时一种特殊的文件,当内存不足时,Oracle用他来存储一些临时数据,如排序或散列操作. 自12c起,对临时表的操作所产生的undo也会放到临时表空间中,而在12c之前,这部分undo放在u ...

  8. 利用C# Winform做Windows系统任务栏

    最近公司做一个考试系统,需要一个答题栏,要求:占用屏幕上方一部分区域,而且始终置顶,当其他窗口最大化时"答题栏"始终置前并且不遮挡最大化窗口的任何部分!就像windows任务栏一样 ...

  9. CozyRSS开发记录17-Html2Xaml

    CozyRSS开发记录17-Html2Xaml 1.RssContentView还需要优化 上回做了RssContentView的显示,但是对于rss返回的描述(摘要),连换行的没有,更别说里面还有h ...

  10. maven权威指南学习笔记（三）——一个简单的maven项目

    目标: 对构建生命周期 (build  lifecycle),Maven仓库 (repositories),依赖管理 (dependency management)和项目对象模型 (Project O ...