第六种方法，使用css的writing-mode属性，结合margin：auto。

参考文章：改变CSS世界纵横规则的writing-mode属性

传统的web流中，margin设置auto值的时候，只有水平方向才会居中，因为默认width是100%自适应的，auto才有计算值可依，而垂直方向，height没有任何设置的时候高度绝不会自动和父级高度一致，因此，auto没有计算空间，于是无法实现垂直居中。

原始Web流中，以下代码只能实现水平居中：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

.box {

    width: 400px;

    height: 400px;

    background-color: yellow;

}

.auto {

    display: block;

    margin: auto;

}

  </style>

</head>

<body>

<div class="box">

    <img src="me.jpg" class="auto">

</div>

</body>

</html>

加入writing-mode属性之后，代码如下：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

.box {

    width: 400px;

    height: 400px;

    background-color: yellow;

    writing-mode: tb-rl;

    -webkit-writing-mode: vertical-rl;

    writing-mode: vertical-rl;

}

.auto {

    display: block;

    margin: auto;

}

  </style>

</head>

<body>

<div class="box">

    <img src="me.jpg" class="auto">

</div>

</body>

</html>

实现的小猫的垂直居中，实际上如果换个角度看图片，比如该黄色背景的div向左旋转90度，或者把自己的脑袋向右歪一下，这样right就变成了传统web流中的top，就可以很好的理解了为什么用margin可以实现垂直居中。

但是该方法在IE8中的却不好使，但是在把img元素换成div就可以了

css垂直居中方法（四）的更多相关文章

  1. CSS垂直居中的四种方法

    写在前面的话 最近在Stack Overflow上看到 一个不错的回答 ,以下是我对其的总结,分享给大家. 垂直居中的四种方法 ①基础的方法 设置父元素的line-height等于height,这种方 ...

  2. 最常用的css垂直居中方法

    css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...

  3. css垂直居中方法

    CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.

  4. [css] 垂直居中方法

    原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...

  5. css垂直居中方法总结

    在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...

  6. css垂直居中方法（二）

    第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...

  7. css 垂直居中方法总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...

  8. css 垂直居中方法汇总

    查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...

  9. css垂直居中方法盘点

    1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...

随机推荐

  1. 安装Xcode 7 beta后Xcode 6崩溃的问题

    最新解决方案:把OSX El Capitan升级到Beta 7  (15A263e),Xcode6可使用! 解决方案:http://stackoverflow.com/questions/318035 ...

  2. LSM树——LSM 将B+树等结构昂贵的随机IO变的更快，而代价就是读操作要处理大量的索引文件(sstable)而不是一个，另外还是一些IO被合并操作消耗。

    Basic Compaction 为了保持LSM的读操作相对较快,维护并减少sstable文件的个数是很重要的,所以让我们更深入的看一下合并操作.这个过程有一点儿像一般垃圾回收算法. 当一定数量的ss ...

  3. jspm

    1.简介 JavaScript 模块的写法有几种,比如 AMD,CommonJS .. 还有标准化的 ES6 的写法 .. jspm 支持加载所有的用这些方法写的 JavaScript 模块 在你的应 ...

  4. 在C#中，Json的序列化和反序列化的几种方式

    摘自:http://www.cnblogs.com/caofangsheng/p/5687994.html 在这篇文章中,我们将会学到如何使用C#,来序列化对象成为Json格式的数据,以及如何反序列化 ...

  5. github提交代码时遇到”Everything up-to-date“问题的解决方式

    需要创建一个新分支,将最新代码加入新分支, 再将新分支合并到主分支,然后提交主分支代码到github网站. ---------------------------------------------- ...

  6. UVA - 1602 Lattice Animals (暴力+同构判定)

    题目链接 题意:求能放进w*h的网格中的不同的n连通块个数(通过平移/旋转/翻转后相同的算同一种),1<=n<=10,1<=w,h<=n. 刘汝佳的题真是一道比一道让人自闭.. ...

  7. LeetCode Minimum Absolute Difference in BST

    原题链接在这里:https://leetcode.com/problems/minimum-absolute-difference-in-bst/#/description 题目: Given a b ...

  8. hdu5542 The Battle of Chibi[DP+BIT]

    求给定序列中长度为M的上升子序列个数.$N,M<=1000$. 很容易想到方法.$f[i,j]$表示以第$i$个数结尾,长度为$j$的满足要求子序列个数.于是转移也就写出来了$f[i][j]+= ...

  9. java中初始化方法

    本文主要是讲从<java编程思想>中看到的东西,是第七章复用类的开头内容,主要是类初始化的几种方法的位置,主要包括 1.在定义对象的地方.这意味着他们总是在构造器被调用前被初始化. 2.在 ...

  10. echo 的部分用法

    echo “内容” > 文件名 (会覆盖文件里的所有内容) echo “内容” >> 文件名 (追加内容到文件里,会另起一行写入) 如果您阅读过此文章有所收获,请为我顶一个,如果文章 ...