在我的技巧里,有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. centos6 安装mysql

    如果要在Linux上做j2ee开发,首先得搭建好j2ee的开发环境,包括了jdk.tomcat.eclipse的安装(这个在之前的一篇随笔中已经有详细讲解了Linux学习之CentOS(七)--Cen ...

  2. 3.IP协议,ARP协议,RARP协议

    1.IP协议 IP协议是TCP/IP协议的核心,所有的TCP,UDP,IMCP,IGCP的数据都以IP数据格式传输.要注意的是,IP不是可靠的协议,这是说,IP协议没有提供一种数据未传达以后的处理机制 ...

  3. MYSQL 函数复习

    数学函数    ABS(X)    返回X的绝对值    SQRT(x)        返回非负数X的二次方根    MOD(x,y)    返回x被y除后的余数    CEIL(x)         ...

  4. Java jsp基本结构

    <!DOCTYPE html> <!-- [ published at 2015-11-13 12:30:50 ] --> <html> <head> ...

  5. ImageView及其子类(一)

    ImageView继承自View组件,它的主要功能是用于显示图片——实际上这个书法不太严谨因为他能显示的不仅是图片,任何Drawable对象都可以使用ImageView来显示.除此之外,ImageVi ...

  6. Oracle Job 语法和时间间隔的设定(转)

    http://blog.itpub.net/27157/viewspace-425567/ 初始化相关参数job_queue_processesalter system set job_queue_p ...

  7. 理解FMS中的实例

    FMS服务器端安装后,唯一需要注意的是设置端口,默认的访问端口是1935和80,如果服务器上安装了IIS提供 WEB服务,那么需要将80修改为其他端口如8080,否则,IIS将会无法工作.如果愿意,也 ...

  8. Bootstrap入门(二十四)data属性

    Bootstrap入门(二十四)data属性 你可以仅仅通过 data 属性 API 就能使用所有的 Bootstrap 插件,无需写一行 JavaScript 代码.这是 Bootstrap 中的一 ...

  9. zstuoj 4243

    牛吃草 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 441  Solved: 139 Description 农夫有一个长满草的(x0, y0)为圆心 ...

  10. ubuntu 压缩软件

    7-zip 安装: sudo apt-get install p7zip-full 使用方法: 7z x file file是你要解压的文件名 更多使用方法: man 7z rar sudo apt- ...