css3 内容居中-改变CSS世界的垂直和水平规则的writing-mode属性

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1. 上升书写模式

CSS的writing-mode属性，我们很少见到，也很少使用！ 我们经常把不常见的东西称为“不常见”，就像不常见的字符我们称之为“不常见的字符”一样，所以不常见的CSS属性，我们可以称之为“不常见的属性”，writing-mode给我们的感觉就是一个“不常见的属性”，非常软弱的，可有可无的。

然而，事实上，我们都错了，大错特错，写作模式弱？ 尼玛，别开玩笑了，writing-mode可以说是CSS世界里最逆天的CSS属性了，直接颠覆了CSS世界里的很多规则。

写作模式之所以给人一种“不寻常”的感觉，是有诱因的。

事实上，writing-mode CSS属性在古代就诞生了，IE5.5浏览器已经支持它了：

真奇怪！ 既然写作模式这么鸟，同时又早又合格，为什么还差了快20年了？

这是因为，很长一段时间以来，FireFox 和 Chrome 等现代浏览器都不支持书写模式。 书写模式基本上是IE浏览器的私有产品。 你对IE一直没有好印象吧？ 艾吾和吴东来西往，自然也不喜欢写作模式。

然而，就在我们被流行的后端技术蒙蔽了双眼的时候，现代各大浏览器已经实现了越来越多的对writing-mode的标准支持（主要得益于FireFox浏览器的积极跟进），也就是说，我不知道不知道什么时候，书写模式的兼容性不再是问题了，再加上这个属性本身的特性就逆天了，我去，我仿佛看到了一颗冉冉升起的新星，不，是新月，又是新月。圆月亮。

二、writing-mode原有功能

有点类似于float属性，writing-mode最初是为了控制内联元素的显示（即所谓的文本布局——TextLayout）而设计的。 因为在欧洲，尤其是中国这样的东亚国家，文字的排版不是横向的，而是纵向的，比如中国古诗词。

为此，使用writing-mode来实现文本的水平呈现。

你可以硬点这里：CSS书写模式与文本垂直布局demo()

从IE11浏览器IE8模式切出：

写作模式句型

writing-mode的句型学习比其他CSS属性要高，因为我们需要记住两套不同的句型。 第一个是 IE 私有属性，第二个是 CSS3 规范属性。

先看一下以后需要的CSS3句型：

/*关键字值*/

writing-mode:horizo​​ntal-tb;/*默认值*/

书写模式：垂直rl；

书写模式：垂直lr；

/*全局值-仅支持关键字inheritIE8+,initial和unsetIE13*/

写入模式：继承；

写入模式：初始；

写入模式：未设置；

每个关键字属性值的含义，我们可以知道透明名称的大概含义，例如默认值horizo​​ntal-tb表示文本流向是水平的（horizo​​ntal），元素是从上到下的（tb：上-下）堆叠。

Vertical-rl表示文本垂直显示，阅读顺序是从右到左（rl：right-left），这和我们诗歌的阅读顺序一致。

Vertical-lr 表示文本以垂直方向（vertical）显示，阅读顺序仍然是默认的从左到右（lr：left-right），即只是从水平变为垂直。

以下是各个值下的中英文表现对比（参考自MDN）：

//zxx: 你会发现汉字是横着的，你可以尝试使用text-orientation:upright使其竖直，IE不支持，FireFox、Chrome支持。

我们来看看旧版IE浏览器的句型。 由于历史原因，事情变得相当复杂。 IE官方文档显示如下：

-ms-写作模式：lr-tb|rl-tb|tb-rl|bt-rl|tb-lr|bt-lr|lr-bt|rl-bt|lr|rl|tb

根据我自己的测试（非原生IE8、IE9），可以默认-ms-private前缀，IE浏览器支持直写模式。 -ms-writing-mode IE7浏览器不支持这些写法，官方说明如下：

WindowsInternet Explorer7。Therl-tb 和 bt-rl 值可用于 ms 写入模式

也就是说IE7的-ms-writing-mode可以使用rl-tb和bt-rl这两个值，但这与我自己的测试不符。 我认为可能是原生IE7浏览器的问题，但我没有原生IE7，所以没有做过测试css3 内容居中，因此，这个说法（原生IE7支持）只是我自己的猜测。

我用脚趾头数了一下，IE浏览器下的关键词值多达11个，刚好够组成一个足球运动员，

LR-TB

IE7+浏览器支持。 初始值。 内容从左到右（左-右）、从上到下（上-下）水平流动，下一行水平元素位于上一行元素的下方，所有符号均竖直放置。 大多数书写系统都使用这些布局。

RL-TB

IE7+浏览器支持。 内容从右到左、从上到下水平流动，下一行水平元素位于上一行元素的下方。 所有符号均垂直放置。 这种类型的布局适合从右到左的书写语言，例如阿拉伯语、希伯来语、塔纳语和格鲁吉亚语。

tb-rl

IE7+浏览器支持。 内容从上到下（从上到下）、从右到左（从右到左）垂直流动，下一条垂直线位于上一条垂直线的一侧，半角符号垂直放置，非半角符号垂直放置。宽度符号（也称为窄拉丁语或窄假名）顺时针旋转 90°。 这些布局在东亚印刷术中更为常见。

BT-RL

IE7+浏览器支持。 内容从下到上（从下到上）、从右到左（从右到左）垂直流动，下一条垂直线位于上一条垂直线的一侧，半角符号垂直放置，非半角符号垂直放置。宽度符号（也称为窄拉丁语或窄假名）顺时针旋转 90°。 这种布局在东亚从右到左垂直键入的文本块中更为常见。

tb-lr

IE8+浏览器支持。 内容从上到下和从左到右垂直流动。 下一个垂直行位于上一个垂直行的左侧。

BT-LR

IE8+浏览器支持。 内容从下到上和左右垂直流动。

远程BT

IE8+浏览器支持。 内容从下到上和左右水平流动。 下一个水平行位于上一行之前。

转氨酶

IE8+浏览器支持。 内容从下到上和从右到左水平流动。

LR

IE9+浏览器支持。 用于 SVG 和 HTML 元素。 相当于lr-tb。

RL

IE9+浏览器支持。 用于 SVG 和 HTML 元素。 相当于rl-tb。

待定

IE9+浏览器支持。 用于 SVG 和 HTML 元素。 相当于tb-rl。

各属性值的表现如下（来自Google官网）

一些注意事项：

需要注意的writing-mode属性值

从直接开发的角度来看，虽然IE支持最多11个私有属性值，而我们需要关注的只有几个，但是它们是哪几个呢？

如果你的项目需要兼容IE7，只需要关注这两个值：初始值lr-tb和tb-rl，对应CSS3规范中的horizo​​ntal-tb和vertical-rl！ 至于其他9个属性值，就让他们玩过家家吧。

如果你的项目只需要兼容IE8+，那么恭喜你，你可以完全对应CSS3标准属性，而且IE8下的writing-mode比IE7强大很多。 我们需要注意的是：初始值lr-tb、tb-rl和tb-lr分别对应CSS3中的horizo​​ntal-tb、vertical-rl和vertical-lr。

是不是看起来复杂的属性其实很简单？ 让我们重建一个真实的版本：

书写模式：lr-tb|tb-rl|tb-lr(IE8+);

书写模式：水平-tb|垂直-rl|垂直-lr;

是的，你只需要记住前几个就足够了！ 因为所谓的垂直布局，实际的web开发中很少遇到。

有的朋友可能会疑惑，writing-mode既然实现了文字的竖排排版，那么学习还有什么意义呢？

后面也提到，虽然writing-mode的初衷是文本布局，而它带来的文档流程的改变，除了改变我们多年来正常的CSS认知之外，还能巧妙地实现很多意想不到的需求和疗效。

3.writing-mode无意中改变了什么规则？

writing-mode 将页面默认的水平流转为垂直流，颠覆了我们前些年的很多认知。 所有只适用于水平方向的规则都可以适用于垂直方向！

1.水平方向也可以重叠边距

W3C 文档边距重叠之一：

fanin 流块级元素的底部边距始终与下一个流入块级同级元素的顶部边距折叠，除非该同级元素具有间隙。

写清楚的bottommargin和topmargin会重叠； 然而，这是CSS2文档中的描述。 在CSS3的世界里，因为writing-mode的存在，这些说法并不严谨。 应该是相反流向的margin值会发生Overlap。 也就是说，如果元素是默认的水平流，垂直边距就会重叠； 如果元素是垂直流动的，水平边距将会重叠。

眼见为实，可以硬点这里：CSSwriting-mode 和 margin 水平重叠演示

结果：

2.可以使用margin:auto实现垂直居中

我们应该是他们所有人。 在传统的Web流中，当margin设置为auto值时，只能水平方向居中。 由于默认的宽度是100%自适应的，auto有一个估计值可以依赖，而垂直方向，高度没有任何设置，高度永远不会手动和父级的高度一致。 因此，auto不会估计空间，因此无法实现垂直居中。 而且，在书写方式的世界里，纵横规则早已改变，元素的行为也发生了翻天覆地的变化。

我们先来看看，图片元素margin:auto实现垂直居中，可以硬点这里：CSSwriting-mode and image margin:auto 垂直居中demo() 其中图片：

img{显示：块；上边距：自动；下边距：自动；}

FireFox浏览器下（P省流量）：

不过IE浏览器下，没有垂直居中~~

纳尼？ ！ 难道IE不支持垂直流垂直居中？ 不，根据小弟的测试，那就是替换图片之类的元素其实是不行的，普通的块元素都是可以的。

大家可以硬点这里：CSSwriting-mode与普通块元素边距：自动垂直居中demo() 这时候除了IE11edge之外，连IE8浏览器也都是垂直居中了！ IE8浏览器中块元素的margin:auto居中

3.可以使用text-align:center实现图像垂直居中

后面会提到，auto在IE浏览器下无法实现图片的垂直居中。 如果我们坚持让图片垂直居中，我们可以使用text-align:center。 可以点击这里：CSS书写模式与图片文字对齐:center垂直居中demo()

结果，病态的IE浏览器幸免于难：

因为我们直接使用inline特性来控制，为此IE7浏览器在text-align:center下也可以实现图片的垂直居中。 不过根据我在IE11↘IE7下的测试，写模式需要写在最后Reset处（原版恐怕不会这样），为此，完整的写模式代码是：

.垂直模式{

写入模式：tb-rl；

-webkit-writing-mode：垂直rl；

书写模式：垂直rl；

*书写模式：tb-rl；

4.可以使用text-indent实现文本下沉效果

这是一个真实的项目示例，旨在减少按下按钮时文本下沉的影响。 如果你来实现它，你将如何实现它？ 列宽控制？ 但默认的文本是不居中的（对于高度自适应的按钮，line-height下沉以防止按钮的高度改变，默认不能完全居中）。 padding+height被精确控制，有点烦人。 然而，在垂直流动的写作模式上，我们有了新的想法。 例如，我们可以直接使用text-indent来实现垂直方向控制。 出乎意料的是css3 内容居中，我们不需要关心高度、内边距和宽度。 任何按钮都可以通用，因为文本缩进不会影响元素的原始框布局。

大家可以硬点这里：CSSwriting-mode和text-indent文本接收效果demo()

包括IE7在内的浏览器都支持（同上应该最后被*writing-mode覆盖）并且都支持下沉。

为什么会有这样的认识呢？ 这是由于英语。 竖流排版时，英文不会旋转，仍然是直立的，也就是说，即使我们肉眼看到文字没有太大变化，但是排版流却已经发生了变化。 它曾经类似于水平控制属性，如text-indent/letter-spacing应用于垂直方向。

其实我们这个案例的巧合在于，只有一个按钮文本，如果有多个按钮文本，可能就没那么轻松美妙了。

5.可以实现所有兼容iconfonts图标的旋转效果

在老旧的IE浏览器下，我们要实现小图标的旋转效果是不是很烦恼呢？ 使用IE的旋转或者翻转滤镜（滤镜）可以参考我之前的《CSS垂直翻转/水平翻转提高网页资源复用性》和《IE Matrix Filter矩阵旋转与缩放扩展与变换结合》一文。

现在有了写作模式，我们就不用担心那么多了。

后面你可能还会注意到，当书写模式使文档变成垂直流时，我们的英文和数字符号会“躺着”显示，也就是自然旋转了90°。 此时，我们不妨敞开心扉。 如果我们利用iconfonts技术，让那些字符直接映射到一个小图标上，那不是很容易实现小图标的旋转吗？ 关键是连被杀了几千年的IE6、IE7浏览器也支持了，比过滤器简单多了！

眼见为实，可以硬点这里：writing-mode 实现 iconfonts 图标旋转效果 demo()

连IE7浏览器都非常牛逼！

6.充分利用高度自适应布局

尼玛不行了，内容太多了

下面的7、8、9、10就跳过吧~~

事实上，放开你的大脑。 理论上，有了写作模式，我们可以比以前多做50%的事情，即使你想不到，或者做不到。

四、写作方式与方向的关系

CSSdirection 属性是上个月刚刚引入的，这也是一件好事。 详情请参见《CSSdirection属性介绍及实际应用》。 它可以改变文字的方向，那么它和writing-mode有什么关系呢？

writing-mode、direction、unicode-bidi（MDN 文档）是 CSS 世界中可以改变文本布局流程的三个属性。 其中direction和unicode-bidi属于近亲，经常一起使用。 它们也是唯一两个不受 CSS3all 属性影响的 CSS 属性。 它们基本上与内联元素一起使用，据说它们实际上是为阿拉伯文本设计的。

乍一看，虽然writing-mode包括direction和unicode-bidi的单独功能和行为，但vertical-rl的rl值与direction的rtl值类似，都是从右到左。 但事实上，两者并无交集。 由于此时vertical-rl的文档流是垂直方向，所以rl代表水平方向，然后此时设置direction:rtl。 其实rtl的值改变了行内元素在垂直方向的文本方向，一横一竖，没有交集。 而writing-mode可以影响球形元素，直接改变CSS世界的纵横规则，比direction更强大、更幽灵。 而且我听说它实际上是为东亚人物设计的。

然而CSS的奇妙之处就在于，个体的特征可能就是个体的图文布局设计，我们可以利用它的特征来发挥我们的创造力，达到许多其他意想不到的效果。 所以，其中出现的三剑客是非常好的资源。

五、writing-mode和*-start属性的流程机制

CSS3中有很多*-start/*-end属性（也称为CSS逻辑属性），例如：margin-start/margin-end、border-start/border-end、padding-start/padding-end等text-align:start/text-align:end 语句。

那么下一个问题来了，为什么会出现这么多*-start/*-end鬼魂呢？

那是因为现代浏览器增强了对流的支持，包括老江湖方向，以及近几年跟进的writing-mode。

一直以来，在我们的认知中，网页的布局都有一个流动方向，即从左到右、从上到下。 因此，我们使用 margin-left/margin-right 没有问题。 并且，如果我们的流程可以改变，比如一张图片距离左边缘20个像素，而我们希望文档流程是从右到左，同时距离左侧20个像素，那么应该怎么做呢？我们的确是？

此时margin-left: 20px在图像方向改变后无效； 而margin-start则不会出现这个问题。 所谓起始，就是指文档流开始的方向。 也就是说，如果页面默认文档流是水平的，则 margin-start 等于 margin-left，如果是水平从右到左的文档流，则 margin-start 等于 margin-right 。 margin-end 也类似。

webkit内核浏览器还支持*-before和*-end。 默认的margin-before与margin-top类似，margin-after与margin-bottom类似。 但规范中没有提及，FireFox 也不支持。 * -before 和 *-after 发挥的机会并不多，为什么？ 其实有了writing-mode，*-start/*-end已经可以满足我们对逻辑位置的需求了，水平和垂直都可以控制，相反的方向适用于老的*-top/*-bottom。

例如，如果我们将writing-mode值设置为vertical-rl，则margin-start相当于margin-top。 如果margin-start和margin-top同时存在，则按照权重和后退原则相互覆盖。

可见，margin-start在不同场景下的作用是不同的。 它可以是向上或向下，向左或向右。

关于*-start/*-end，后面有机会再详细讲，就先到这里了。 恐怕目前你还不会在实际项目中使用它。

【今日陌陌公众号推荐↓】