writing-mode与absolute，auto垂直居中

Posted 2020-08-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了writing-mode与absolute，auto垂直居中相关的知识，希望对你有一定的参考价值。

实现垂直方向margin：auto居中

writing-mode:vertical-lr;改变垂直方向

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            #father{
                  width: 100%;
                  height: 500px;
                  background: lightcoral;
                  writing-mode:vertical-lr;
            }
                  #son{
                        background: lightblue;
                        height: 200px;
                        margin:auto;
                        width: 200px;
                        }
            </style>
      </head>
      <body>
<div id="father">
      <div id="son">
 
      </div>
</div>
      </body>
</html>

使用absolute，auto居中定位

设置其父类元素为relative属性，子元素为absolute属性

<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
            <title></title>
            <style type="text/css">
            #father{
 
                  height: 500px;
                  background: lightcoral;
                position: relative;
            }
                  #son{
                        background: lightblue;
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 200px;
                        height: 100px;
                        margin: auto;
                        }
            </style>
      </head>
      <body>
<div id="father">
      <div id="son">
 
      </div>
</div>
      </body>
</html>

以上是关于writing-mode与absolute，auto垂直居中的主要内容，如果未能解决你的问题，请参考以下文章

CSS生僻属性 - writing-mode属性

解决 Safari 表格 colspan/writing-mode 宽度错误

css属性 writing-mode 改变文字书写方向

改变CSS世界纵横规则的writing-mode属性

css实现元素竖向排列 --- writing-mode

在css中哪个属性会影响dom读取文档流的顺序.direction，writing-mode