水平上居中的方法比較多如設置margin:0 atuo等,一般垂直居中比較麻煩

利用定位水平、垂直居中
/*第一種*/
　　position: absolute;
　　top: 0;
　　right: 0;
　　bottom: 0;
　　left: 0;
　　margin: auto;
此種方法適用於不確定盒子的高度以及自身高度的情況.
父級需設置position:absolute或result.

/*第二種*/

parentElement{
        position:relative;
    }
 childElement{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

 }
 

/*第三種*/
　　postion: absolute;
　　top: 50%;
　　left: 50%;
　　margin-left: -width/2;(自身寬度一半)
　　margin-top: -height/2;(自身高度一半)

在不使用定位時,可以通過設置height和line-height相等,達到垂直居中
　　height: 40px;
　　line-height: 40px;
　　text-align; center;//水平居中

將行距增加到和整個盒子一樣高,內容自然居中,無需設置vertical-align: middle.


display和vertical-align組合,達到水平居中

    display:table-cell;  /*將對象作為表格單元格顯示 */
 

    vertical-align:middle;

其他,如設置flex等,也可以達到居中效果,想了解的同學可以自己去搜索.

內容居中(主要是垂直居中)