-水平居中、垂直居中、水平垂直居中


1、水平居中

水平居中可分為行內元素水平居中塊級元素水平居中

1.1 行內元素水平居中

這里行內元素是指文本text、圖像img、按鈕超鏈接等,只需給父元素設置text-align:center即可實現。

.center{
        text-align:center;
}
<div class="center">水平居中</div>

 

1.2 塊級元素水平居中

  • 定寬塊級元素水平居中
    只需給需要居中的塊級元素加margin:0 auto即可,但這里需要注意的是,這里塊狀元素的寬度width值一定要有

    .center{
    width:200px; margin:0 auto; } <div class="center">水平居中</div>

     

  • 不定寬塊級元素水平居中
    不定寬,即塊級元素寬度不固定
    方法1:設置table

    通過給要居中顯示的元素,設置display:table,然后設置margin:0 auto來實現

     .center{
          display:table;
          margin:0 auto;
          border:1px solid red;
      }
      <div class="center">水平居中</div>

     

    方法2:設置inline-block(多個塊狀元素)
    子元素設置inline-block,同時父元素設置text-align:center

     .center{
          text-align:center;
      }
      .inlineblock-div{
          display:inline-block;
      }
      <div class="center">
          <div class="inlineblock-div">1</div>
          <div class="inlineblock-div">2</div>
      </div>

     

    方法3:設置flex布局
    只需把要處理的塊狀元素的父元素設置display:flex,justify-content:center;

     .center{
          display:flex;
          justify-content:center;
      }
      <div class="center">
          <div class="flex-div">1</div>
          <div class="flex-div">2</div>
      </div>

     

    方法4:position + 負margin;
    方法5:position + margin:auto;
    方法6:position + transform;

    注:這里方法4、5、6同下面垂直居中一樣的道理,只不過需要把top/bottom改為left/right,在垂直居中部分會詳細講述。

2、垂直居中

2.1 單行文本垂直居中

  • 設置paddingtop=paddingbottom;或
  • 設置line-height=height;

2.2 多行文本垂直居中

通過設置父元素table,子元素table-cell和vertical-align
vertical-align:middle的意思是把元素放在父元素的中部

 

 

2.3 塊級元素垂直居中

方法1:flex布局
在需要垂直居中的父元素上,設置display:flex和align-items:center
要求:父元素必須顯示設置height值

 

顯示效果:

 

方法2:利用position和top和負margin(需知寬高)
1、設置元素為absolute/relative/fixed
2、margin=負一半

 


效果如下:

 

 

方法3:利用position和top/bottom和margin:auto(注意不是margin:0 auto)
1、position:absolute/relative/fixed
2、top/bottom:0
3、margin:auto

 

效果如下:

 


方法4:利用position和top和transform
transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。

 


效果如下:

 

 

注:

  • 上述的塊級垂直居中方法,稍加改動,即可成為塊級水平居中方法,如top/bottom換成left/right
  • transform方法,可用於未知元素大小的居中

3、水平垂直居中

方法1:絕對定位+margin:auto

 div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

 

方法2:絕對定位+負margin

 div{
        width:200px;
        height: 200px;
        background:green;
        
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

 

方法3:絕對定位+transform

div{
        width: 200px;
        height: 200px;
        background: green;
        
        position:absolute;
        left:50%;    /* 定位父級的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

 

方法4:flex布局

.box{
         height:600px;  
         
         display:flex;
         justify-content:center;  //子元素水平居中
         align-items:center;      //子元素垂直居中
           /* aa只要三句話就可以實現不定寬高水平垂直居中。 */
    }
    .box>div{
        background: green;
        width: 200px;
        height: 200px;
    }

 

方法5:table-cell實現居中

.box{        display:table-cell;  
                vertical-align:middle;     
        text-align:center;         
        width:120px;         
        height:120px;          
        background:purple;
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM