CSS居中总结

CSS居中总结

• <center>不建议用了

• text-align:center在父容器里水平居中 inline 文字，或 inline 元素

• vertical-align:middle垂直居中 inline 文字，inline 元素，配合 display:table ，display:table-cell，有奇效。

• line-height与 height 联手，垂直居中文字

• margin:auto

  
              #ex2_content { 
              margin:0px auto;           
              display:table; }
               

• translate(-50%,-50%)用 position 加 translate,translate(-50%,-50%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

  
              #ex3_content { 
              left:50%; 
              top:50%; 
              transform:translate(-50%,-50%); 
              -webkit-transform:translate(-50%,-50%);            
              position:absolute; }
               

  这个技巧相当嚣张，同样适用于没固定大小的内容，min-width，max-height，overflow:scroll 等

• 绝对定位居中父容器元素：position: relative

  
          .Absolute-Center {
            width: 50%;  
            height: 50%;    
            overflow: auto;
            //下面这几行与居中有关   
            margin: auto;
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
          }
               

  高度必须定义，建议加 overflow: auto，防止内容溢出（针对子容器里面内容的）。

• 视口居中父容器元素 position: relative

  
           //模态框
          .Absolute-Center.is-Fixed {
            width: 50%;
            height: 50%;
            min-width: 400px;
            max-width: 500px;
            overflow: auto;
          
            margin: auto;
            position: fixed;
            top: 0; left: 0; bottom: 0; right: 0;
            z-index: 999;
          }
               

  只要 margin: auto; 在，内容块将垂直居中，top, left, bottom, right 可以设置偏移。

• 负 margin确切知道宽高，负 margin 是宽和高的一半。

  
          .is-Negative {
                  width: 300px;
                  height: 200px;
                  padding: 20px;
                  position: absolute;
                  top: 50%; left: 50%;
                  margin-left: -170px; /* (width + padding)/2 */
                  margin-top: -120px; /* (height + padding)/2 */
          }
               

• Table-Cell

• FlexBox

  
          .Pos-Container.is-Flexbox {
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
               -moz-box-align: center;
               -ms-flex-align: center;
            -webkit-align-items: center;
                    align-items: center;
            -webkit-box-pack: center;
               -moz-box-pack: center;
               -ms-flex-pack: center;
            -webkit-justify-content: center;
                    justify-content: center;
          }