在我的技巧里，有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.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" class="height">

<head>

    <title></title>

    <style>

        *{

            margin:0;

            height:0;

        }

        .height{

            height:100%;

        }

        .body{

            height:100%;

            background-color:red;

            overflow:hidden;

            text-align:center;

            position: relative;

        }

        .body::after {

            content: "";

            vertical-align: middle;

            display: inline-block;

            width: 1px;

            height: 100%;

        }

        .content{

            display:inline-block;

            vertical-align:middle;

            width:500px;

            background-color:white;

            padding:50px;

            position: relative;

        }

    </style>

</head>

<body class="body">

    <div class="content">asd</div>

</body>

</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. win8.1 64位+oracle11g R2 64位 +powerdesigner破解版 64位+PL/SQL

    安装时搜索了很多帖子,很多就是复制粘贴(完全不需要什么IP,host),有的版本不对,有的版本太老,今天决定贴出自己的处女贴 oracle的安装很简单,不需要说什么了,PL/SQL真是恶心死 orac ...

  2. robotium从入门到放弃 三 基于apk的自动化测试

      1.apk重签名   在做基于APK的自动化测试的过程中,需要确保的一点是,被测试的APK必须跟测试项目具有相同的签名,那怎么做才能确保两者拥有相同的签名呢?下面将给出具体的实现方法. 首先将被测 ...

  3. DevExpress控件学习总结2（转）

    1.TextEditor(barEditItem)取文本string editValue = barEditItem1.EditValue.ToString(); //错误,返回null string ...

  4. 前言《iOS网络高级编程：iPhone和iPad的企业应用开发》（书籍学习）

    本书内容: 在客户端设备与服务器之间执行HTTP请求 管理客户端设备与服务器之间的数据负载 处理HTTP请求的错误 保护网络通信 改进网络通信的性能 执行Socket层的通信 实现推送通知 单个设备上 ...

  5. win32 安装 xcache扩展

    今天整了一上午,才整明白. 我的系统是是 win7 32位 ,用的环境是 Wamp,php版本是5.3.5,后来在http://xcache.lighttpd.net/pub/Releases/3.0 ...

  6. Struts2框架学习(一)

    Struts2框架学习(一) 1,Struts2框架介绍 Struts2框架是MVC流程框架,适合分层开发.框架应用实现不依赖于Servlet,使用大量的拦截器来处理用户请求,属于无侵入式的设计. 2 ...

  7. css全局样式表

    http://blog.csdn.net/baok1592/article/details/6448378

  8. HTTPS=HTTP + SSL / TLS

    以下的两个链接作为本次编辑的参考 https://www.bennythink.com/school-1.htmlhttps://www.bennythink.com/school-2.html 应一 ...

  9. Qt Quick编程(1)——QML的核心部分ECMAScript

    说道QML,不得不先说一下ECMAScript: ECMAScript语言的标准是由Netscape.Sun.微软.Borland等公司基于JavaScript和JScript锤炼.定义出来的. EC ...

  10. 定时任务管理中心（dubbo＋spring）－我们到底能走多远系列47

    我们到底能走多远系列47 扯淡: 又是一年新年时,不知道上一年你付出了多少,收获了多少呢?也许你正想着老板会发多少奖金,也许你正想着明年去哪家公司投靠. 这个时间点好好整理一下,思考总结一下,的确是个 ...