CSS-垂直居中

1、vertical-align 属性

vertical-align属性只对行内元素有效，对块内元素无效！

 

当display:inline-block;为必要条件的时候，可以适当用table-cell取替、

将display属性设置为table-cell，块元素转化为单元格，然后加上vertical-align:middle

 

如图：

 

 

 

div {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    vertical-align: middle;
    display: table-cell;
      text-align: center;
    }

    span {
      width: 50%;
      height: 50%;
      border: 1px solid red;
    }

 vertical-align: middle;
 display: table-cell;

对行内元素有效，配合使用 

 

==============这都不重要 ==============

 

2、flex 属性

    display: flex;
    align-items: center;
    justify-content: center;

 

==============这都不重要 ==============

 

3、transform 属性

      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);

 

 

 

这都不重要，够用就行