css經典佈局系列一——垂直居中佈局

木頭房子發表於2019-04-20
CSS

元素水平垂直居中

  • 設定兩個盒子，關係是父子：父元素
<body>
    <div class="parent">
    	<div class="child">
    	    child
    	</div>
    </div>
</body>
複製程式碼

方法一：同寬高+padding

  • 將父元素的width和height設定的和子元素的大小一樣，然後設定父元素parent的padding。此時padding會將子元素擠進父元素的中間位置；
  • 此時父、子元素的定位是否開啟都可以；
*{
    margin: 0;
    padding: 0;
}
.parent{
    width: 100px;
    height: 100px;
    /*將padding設定，來擠出來居中的樣子；但是要注意的是，此時的width和height要和子元素的大小一樣，否則還是不居中*/
    padding: 100px;
    border: 1px solid;
    margin: 100px auto;
}
.child{
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}	
複製程式碼

方法二：absolute + margin:auto

  • 父元素相對定位，子元素絕對定位；
  • 絕對定位盒子模型有個特點：left+right+width+padding+margin=包含塊的寬度；所以此時可以將left、right（預設值為auto，所以需要重設定）設定為0，而padding已經確定（未設定時預設值為0px），所以剩下的都是margin，但是margin的預設值是0px。所以就將magin設為auto，使得元素自動居中了；
  • 即：left、right、top、bottom為0；margin為auto;

如圖講解

*{margin: 0;padding: 0;}
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    /*padding: 100px;*/
    border: 1px solid;
    margin: 100px auto;
}
.child{
    position: absolute;
    /*left+right+width+padding+margin=包含塊的寬度*/
     /*0 0 100 0 auto =300*/
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
複製程式碼

方法三：absolute + 負margin（或transform）

  • 父相對子絕對，上下為50%，margin設為負
  • 強大的absolute對於這種小問題當然也是很簡單的；
  • 絕對定位脫離文件流，不會對後續元素的佈局造成影響。但如果絕對定位元素是唯一的元素則父元素也會失去高度。
  • 父元素相對定位，子元素絕對定位；
  • 將子元素left和right直接設為50%，相對的是父元素；
  • 然後再使用margin-left和margin-top設為子元素的一半的負數。就是將偏離父元素中心的那段拽回來；
.parent{
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
}
.child{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
    width: 100px;
    height: 100px;
    background: pink;
    line-height: 100px;
    text-align: center;
}
複製程式碼
  • 如果不知道子元素的寬和高，則使用transfrom:translate3d(-50% -50% )；
    • transform 為 CSS3 屬性，有相容性問題；
transfrom:translate3d(-50% -50% );
/* width: 100px;
height: 100px; */
複製程式碼
  • 但是這種方法，當在需要做3d變換的元素上不能使用，前後會有所影響；

方法四：inline-block+table-cell

  • 相容性好
<style>
  .parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
  }
</style>
複製程式碼

方法五：flex佈局

  • 只需設定父節點屬性，無需設定子元素
  • 相容性問題
// 父元素設定
display: flex;
justify-content:center;
align-items:Center;
複製程式碼

文字元素的垂直水平居中

  • 設定行高和text-align：
line-height: 50px;
text-align:center;
複製程式碼
  • flex佈局
display: flex;
justify-content:center;
align-items:Center;
複製程式碼

單方面的水平居中或者垂直居中佈局，都可以按照上面的方法來實現

相關文章