本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中。我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在。但是,请注意!想让元素绝对居中,只需要声明元素高度,并且附加以下样式,就可以做到:

1
2
3
4
5
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

如何用 CSS 做到完全垂直居中的更多相关文章

  1. 实用技巧:如何用 CSS 做到完全垂直居中

    本文将教你一个很有用的技巧——如何使用 CSS 做到完全的垂直居中.我们都知道 margin:0 auto; 的样式能让元素水平居中,而 margin: auto; 却不能做到垂直居中……直到现在.但 ...

  2. css如何实现垂直居中(5种方法)

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  3. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  4. 如何用CSS实现在新窗口打开链接?

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  5. CSS实现完美垂直居中

    之前看到很多人一直都问这个问题,不过当时我没当一回事,因为在 CSS 中要垂直居中,多数是在有高度的情况下,或者容器高度不定的情况下才用,看上去比较舒服,而且实现的方法也不少,不一定要拘泥于和 tab ...

  6. 纯CSS制作水平垂直居中“十字架”

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

  7. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  8. 一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  9. 纯CSS基于窗口垂直居中

    都是IE8+的 <!DOCTYPE html> <html> <head> <title>基于窗口垂直居中 by 司徒正美</title> ...

随机推荐

  1. WCF服务配置编辑器使用

    学习wcf,特别是初学者,配置文件很难搞懂,有点复杂,自己手动配置哪有这么多精力啊,这不是吃的太饱了吗,所以学会使用配置编辑器是必须的,下面是学习的流程图. 打开工具的wcf服务配置编辑器,点击文件= ...

  2. JavaScript小例子:复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

  3. 【CoreData】 简单地使用

    先介绍一下什么是CoreData —— 它是在iOS5之后出现的一个框架,提供了对象-关系映射(ORM)的功能,既能够将OC对象转化成数据,保存在SQLite数据库文件中,也能将保存在数据库中的数据还 ...

  4. 深入.net(多态一)

    代码优化技术: 当您在 编写一个类时,如果您发现你需要编写的“属性”和“方法”曾经在已有的类中实现,则,您可以将其共用的“属性”和“方法”剪切到一个新的“类”中,然后,让两个类共同继承这个“新类”.( ...

  5. 【VLC-Android】Mac下编译vlc-android

    前言 突然想整整VLC-Android,然后就下一个玩玩看,这里记录点遇到的问题. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www.cnblogs.com 农民伯伯: htt ...

  6. Android源码笔记——Camera系统架构

    Camera的架构与Android系统的整体架构保持一致,如下图所示,本文主要从以下四个方面对其进行说明. Framework:Camera.java Android Runtime:android_ ...

  7. postgresql 9.2之前的版本 需要CREATE LANGUAGE plpgsql

    CREATE LANGUAGE plpgsql CREATE or REPLACE function getDatirenshu(w_wjID int) RETURNS INTEGER as ' DE ...

  8. json数组的序列化和反序列化json数组的序列化和反序列化

    如题,我就不多说了,自己看代码的,很好理解 using System; using System.Collections.Generic; using System.Web; using System ...

  9. ExtJs4.1中给列表的单元格设置颜色

    如: 代码: {                                        xtype: 'gridcolumn',                                 ...

  10. Sql Server之旅——第四站 你必须知道的非聚集索引扫描

    非聚集索引,这个是大家都非常熟悉的一个东西,有时候我们由于业务原因,sql写的非常复杂,需要join很多张表,然后就泪流满面了...这时候就 有DBA或者资深的开发给你看这个猥琐的sql,通过执行计划 ...