css水平垂直居中方法

一、水平居中方法

      {

              1.text-align:center;

              2.margin:0 auto;

              3.position:absolute/relative;left:50%;

      }

二、垂直居中

1.{

       子元素可用vertical-align:middle(使元素垂直对齐),和display:tab-cell(让元素以表格形式渲染),

       父元素使用display:table,让元素以表格的形式渲染

}

2.给父元素写样式{

height:400px;

display:flex;

display:flex;

flex-direction: row;

align-items: center;  /*与交叉轴的中点对齐（这里为垂直轴）*/

}

三、水平+垂直居中方法

1.{

position:absolute;

width:;

height:;

top:50%;

left:50%;

margin-left:-(元素宽度/2);

margin-right:-(元素高度/2);

}

2.文本水平+垂直居中:

      text-align:center;

      height:;

      line-height:(与height的值相等);

3.{

          position:absolute;

        width:100px;

        height:100px;

        top:0;

        left:0;

        right:0;

        bottom:0;

        margin: auto;

}