本文将教你一个很有用的技巧——如何使用 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. Ubuntu下使用Git和GitHub

    刚刚学习git和github,网上的知识太杂太乱.照着折腾了很长的时间,都没有搞出个结果,心里十分痒痒,最后终于在github上看到成果.本文适合刚刚接触github但是急于想看到效果的同学,当然gi ...

  2. 【代码笔记】iOS-判断中英文混合的字符长度的两种方法

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. ...

  3. IntelliJ IDEA 12.1.4 解决中文乱码

    一.进入IDE Settings 里的 Appearance项,选中Override default fonts by ,把 Name 设置为 SimSun,Size 根据自己喜好设置(我一般设为 1 ...

  4. Photo Shop切图

    切图之前 哪些是需要切出来的? 修饰性的 (一般用在background属性) 图标.logo 有特殊效果的按钮  文字等 非纯色的背景 内容性的 (一般用在img标签) Banner.广告图片 文章 ...

  5. 开源游戏 “Elvish Bird”

    简介: 这个游戏是我在今年(2014/03)课余时闲着无聊做的一个冒险类小游戏,总共花了5个工作日才完成,为了游戏的效率,做了很多优化,目前在IE8以上浏览器能够流畅运行,运行时如果屏幕分辨率不兼容, ...

  6. (视频) 《快速创建网站》1. 网站管理平台WordPress & 微软Azure 云计算简介

    网站并不神秘,过节了,在家闲的没事的,自己建个网站玩玩吧.每段视频不超过15分钟,地铁/公交/睡前/醒来看一段,几天之后变身建站专家,找老板加薪去! 在普通人眼里,创建网站是专业开发人员和IT工程师才 ...

  7. HTML基础(四)——设置超链接的样式示例

     ***设置超链接的样式示例  a:link 超链接被点前状态 a:visited 超链接点击后状态 a:hover 悬停在超链接时 a:active 点击超链接时 在定义这些状态时,有一个顺序l v ...

  8. 记录一些在用wcf的过程中走过的泥巴路 【第一篇】

    自从转移战场之后,比以前忙多了,博客也没能及时跟上,原本准备继续mvc系列,但是在那边技术比较陈旧还没能用得上,话说有3年没接触这玩意了,东西也 都忘了差不多了,既然再次接触,我也就继续温习温习,记录 ...

  9. PHP代码规范

    PHP编码规范 1. 标识符命名规范 标识符的命名力求做到统一.达意和简洁. 1.1 统一 统一是指,对于同一个概念,在程序中用同一种表示方法,比如对于供应商,既可以用supplier,也可以用pro ...

  10. Kafka 技术文档

    Kafka 技术文档   目录 1 Kafka创建背景 2 Kafka简介 3 Kafka好处 3.1 解耦 3.2 冗余 3.3 扩展性 3.4 灵活性 & 峰值处理能力 3.5 可恢复性 ...