css水平垂直居中

在已知居中元素的宽高的情况下：

• 利用定位和负的margin
  在定位的情况下，子元素的top和left使用50%，这个百分比是相对于父元素的，但是如果只设置这两点的话，是子元素的上边界和左边界位于父元素的中心线上，如下图
  
  所以此时要利用margin来使子元素向上向左分别移动自身高度和宽度的一半，由于margin取正值是向右和向下移动，所以取负值自然就是向左和向上移动了。

        .father {
            width: 500px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

• 利用定位各项值为0，再加上margin设为auto，也可实现水平垂直居中。

        .father {
            width: 500px;
            height: 400px;
            background-color: pink;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

在未知居中元素宽高的情况下：

可以利用transform的translate属性，该属性的值是相对于自身宽高而言的，只要设置成百分比的格式，就可以在未知宽高的情况下实现自水平居中或垂直居中或水平垂直居中。
另外可以利用flex布局，justify-content 属性可以设置在主轴上的对齐方式，默认主轴是水平方向起点在左的，该属性设为center；align-items属性定义了交叉轴上的对齐方式，默认交叉轴是从上往下的，设为center。

对于文字元素

line-height这个属性为行高，将行高设为父元素的高度可以实现垂直居中，text-align属性设为center可以实现水平居中。
另外刚百度到了一个没见过的属性writing-mode，可以改变文字的显示方向，设为vertical-lr可以让文字垂直显示。

参考文章