cssレイアウト2

中央揃え

elemP{
  text-align: center;	
}
elelmP elemC{
  display: inline-block;	
}

elemP{
  display: table;
  margin-left: auto;
  margin-right: auto;
}
elelmP elemC{
  display: table-cell;	
}

elemP{
  height: Xpx;
  line-height: Xpx;
}

       elemP{
         position: relative;
         height: 100px; //      
       }
       elelmP elemC{
         position: absolute;
         margin: auto;
         width: ;         //           
         height: ;
         overflow: auto;  //       
         top: 0;
         left: 0;
         bottom: 0;
         right: 0;
       }

*      

      elemC{
        position: fixed; //
        z-index: 9999;   //
        margin: auto;
        width: ;        
        height: ;
        overflow: auto;  
        top: 0;left: 0;bottom: 0;right: 0;
      }

*      

      elemC{
        position: absolute;
        margin: auto;
        width: ;        
        height: ;
        overflow: auto;  
        top: 0;left: 0;bottom: 0;right: 0;
        left/right/top/bottom: auto;  //
      }

*     

      elemC{
        position: absolute;
        margin: auto;
        width: ;        
        height: ;
        overflow: auto;  
        top: 0;left: 0;bottom: 0;right: 0;
        min-width: ; //  
        max-width: ; //  
      }

    elemC{
      width: ;
      height: ;
      padding: ;  
      position: absolute;
      top: 50%; left: 50%;  
      margin-left: -px; /* (width + padding)/2 */  
      margin-top: -px; /* (height + padding)/2 */  
    }

*     

    elemC{
      width:;
      height: ;    
      position: absolute;
      margin: auto;
      top: 50%; left: 50%;  
      transform: translate(-50%,-50%);  
      -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
    }

レイアウト

フローティングレイアウト

.clearfix:after{
  content: "";
  display: block;
  clear: both;
  visibility: hidden;	
}

box-sizing

あふれ出る

overflow

text-overflow(overflow:hidden;を設定してから意味があることに注意)

white-space