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;     
} 

第四種 定位配合margin

.ele{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
  }

 

第三種是給父級添加樣式。先寫這幾種， 夠大家用了，還有通過偽類實現居中的效果，有興趣的可以自己敲下試試