在我的技巧里，有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. Swift 动态创建提示框

    var alert = UIAlertController(title: "", message: "", prefferedStyle: UIAlertCon ...

  2. QT第五天学习

    回顾: QFile QTextSream QDataSream QFileInfo QDir Dir entryList 返回目录下所有文件和目录的名字 entryInfoList 返回目录下所有文件 ...

  3. docker的资源限制cpuset cpuquota memory

    总结 目前,公司7u已经不再使用lxc,转而使用libcontainer 即native docker对cpuquota的支持目前是有问题的,一般大家使用docker的时候,主要是对memory,cp ...

  4. Velocity教程

    Velocity 语法(转) 一.基本语法 1."#"用来标识Velocity的脚本语句,包括#set.#if .#else.#end.#foreach.#end.#iinclud ...

  5. Pomelo框架

    一个典型的多进程MMO运行架构, 如下图所示: pomelo框架的组成如图所示: 架构把游戏服务器做了抽象, 抽象成为两类:前端服务器和后端服务器, 如图: 前端服务器(frontend)的职责: 负 ...

  6. 马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别

    马丁 福勒 Martin Fowler 关于依赖注入和反转控制的区别 http://martinfowler.com/articles/injection.html 中文翻译:http://files ...

  7. OGG学习笔记03-单向复制简单故障处理

    OGG学习笔记03-单向复制简单故障处理 环境:参考:OGG学习笔记02-单向复制配置实例 实验目的:了解OGG简单故障的基本处理思路. 1. 故障现象 故障现象:启动OGG源端的extract进程, ...

  8. CodeForces 446B

    DZY Loves Modification time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  9. HDU5058

    So easy Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Sub ...

  10. 为 Jenkins 配置 .Net 持续集成环境

    去年年底,得益于公司引入 Jenkins,让我们在持续集成方面迈出了第一步,本文不赘述如何安装 Jenkins,主要关注点在于配置 .Net 环境.另外本文是在 Windows 环境下安装的 Jenk ...