在我的技巧里，有4中居中中央的方法：

1.position:absolute; top:50%;left:50%; margin : -x 0 0 -x;

这是绝对定位的方法，通过算法移动，坏处就是必须知道element的height & width。

2.vertical align middle

在element 里，只要知道父层的高，子层就能通过vertical align middle移动到中间，当然，父层同时也要有text align center，或者子层margin auto; display:block;

3.在table里

就是table tr td 里的element是可以简单的居中。坏处就是table和tr必须height 100%； width：100%

4.自己模拟table css

5.

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" class="height">
  3. <head>
  4.     <title></title>
  5.     <style>
  6.         *{
  7.             margin:0;
  8.             height:0;
  9.         }
  10.         .height{
  11.             height:100%;
  12.         }
  13.         .body{
  14.             height:100%;
  15.             background-color:red;
  16.             overflow:hidden;
  17.             text-align:center;
  18.             position: relative;
  19.         }
  20.         .body::after {
  21.             content: "";
  22.             vertical-align: middle;
  23.             display: inline-block;
  24.             width: 1px;
  25.             height: 100%;
  26.         }
  27.         .content{
  28.             display:inline-block;
  29.             vertical-align:middle;
  30.             width:500px;
  31.             background-color:white;
  32.             padding:50px;
  33.             position: relative;
  34.         }
  35.     </style>
  36. </head>
  37. <body class="body">
  38.     <div class="content">asd</div>
  39. </body>
  40. </html>

这也是一样的原理，只是自作了一个after的elem。

css 居中，中央的更多相关文章

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

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

  2. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  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. JavaWeb：EL & JSTL

    EL:全名为 Expression Language 1.语法:${sessionScope.user.sex}(从Session 的范围中,取得用户的性别), 所有的EL 都是以 ${  为起始,以 ...

  2. python 模块添加

    python包含子目录中的模块方法比较简单,关键是能够在sys.path里面找到通向模块文件的路径.下面将具体介绍几种常用情况: (1)主程序与模块程序在同一目录下: 如下面程序结构:`-- src  ...

  3. 1.1.2.托管对象模型（Core Data 应用程序实践指南）

    托管对象模型即对象图,可以看成实体类的描述,规定了数据字段. 要想创建托管对象模型,需生成NSManagedObjectModel类的实例.

  4. eclipse安装Veloeclipse（Velocity编辑插件）

    eclipse安装Veloeclipse(Velocity编辑插件) Help-->install new software-->Add 增加 Name:Veloeclipse Value ...

  5. Linux 系统分区

    合理的系统分区,便于后期管理和提高文件的搜索速度 分区格式说明 linux分区不同于windows,linux下硬盘设备名为(IDE硬盘为hdx(x为从a—d)因为IDE硬盘最多四 个,SCSI,SA ...

  6. win10新特性，ubuntu子系统（安装及配置）

    最新版win10下可以直接跑ubuntu镜像,直接入正题. 这里如果你没有可能是你的版本不是最新的,我这里是最新的win10直接是有这个功能的.勾选后会要求重启,确定即可. 然后win键弹出搜索,输入 ...

  7. [ Android 五种数据存储方式之二 ] —— 文件存储数据

    关于文件存储,Activity提供了openFileOutput()方法可以用于把数据输出到文件中,具体的实现过程与在J2SE环境中保存数据到文件中是一样的. 文件可用来存放大量数据,如文本.图片.音 ...

  8. Eclipse指定JDK版本 Failed to load the JNI shared JVM.dll

    Eclipse指定JDK版本 Failed to load the JNI shared JVM.dll 打开eclipse.ini添加 -vm C:/Java/jdk1.6.0_02/bin 参考: ...

  9. Spring EL中的类操作符

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns:xsi="http://ww ...

  10. doubango地址配置

    转自:http://wiki.sip2sip.info/projects/sip2sip/wiki/SipDeviceConfiguration SIP Device Configuration Th ...