css垂直居中方法（四）

第六种方法，使用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就可以了

posted on 2016-05-16 11:11  莫尤公子  阅读(230)  评论(0)  编辑  收藏  举报

导航