css/css3實現未知寬高元素的垂直居中和水平居中

其實在日常的一些佈局中也常常有要實現元素的垂直居中和水平居中的的須要，下面來寫幾種css/css3實現的未知寬高元素的水平和垂直居中的寫法
ps：不考慮兼容問題（下次會寫js實現元素的水平and垂直居中 ）
第一種 css3的transform

.ele{
/*設置元素絕對定位*/
    position:absolute;
/*top 50%*/
    top: 50%;
/*left 50%*/
    left: 50%;
/*css3   transform 實現*/
    transform: translate(-50%, -50%);
}

第二種 flex盒子佈局

.ele{
/*彈性盒模型*/    
    display:flex;
/*主軸居中對齊*/
    justify-content: center;
/*側軸居中對齊*/    
    align-items: center;  
 }

第三種 display的table-cell  

.box{
/*讓元素渲染爲表格單元格*/
    display:table-cell;
/*設置文本水平居中*/
    text-align:center; 
/*設置文本垂直居中*/
    vertical-align:middle;     
}

第三種是給父級添加樣式。先寫這幾種， 夠你們用了，還有經過僞類實現居中的效果，有興趣的能夠本身敲下試試
轉載於猿2048:➽《css/css3實現未知寬高元素的垂直居中和水平居中》