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

時間 2019-11-06

標籤 css 經典佈局系列垂直居中欄目 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;
複製代碼

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。