【writing-mode与absolute，auto】垂直居中

实现垂直方向margin：auto居中
writing-mode
vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left（类似IE私有值tb-rl）vertical-lr：垂直方向自左而右的书写方式。即 top-bottom-left-right

Paste_Image.png

也可以使用flex布局 子元素设置flex-direction: column;justify-content: center;使项目主轴垂直，然后再对子元素居中显示

Paste_Image.png

        <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>

使用absolute，auto居中定位
设置其父类元素为relative属性，子元素为absolute属性

Paste_Image.png

这里同样可以使用flex进行居中定位，使用justify-content: center;先使得子元素水平居中，然后配合align-items：center；使元素定位在垂直方向的中间

Paste_Image.png Paste_Image.png

        <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>