設定兩個盒子,父盒子裡面巢狀一個子盒子,父盒子.father寬高500px,背景顏色為藍色,子盒子寬高300px,背景顏色為綠色,程式碼和效果如圖所示:

html結構:

css樣式:

初始效果:

 方法一:給子盒子.son新增margin:0 auto;

 水平居中效果:

 方法二:子絕父相定位居中,top 0;bottom 0; left 0;right 0;margin:auto;

css樣式:父盒子相對定位,子盒子絕對定位,子盒子依次設定top 0;bottom 0; left 0;right 0;margin:auto屬性,實現居中效果.

效果:

 方法三:子絕父相定位百分比居中,top50%;margin-top:-150px;left50%;margin-left:-150px

1、父盒子相對定位position：relative,子盒子絕對定位；position：absolute.

2、子盒子設定top50%,讓盒子位於父盒子高度的50%.

3、子盒子設定margin-top:-150px，讓盒子向上行走自身高度的一半，至此實現子盒子垂直居中.

4、子盒子設定left50%,讓盒子位於父盒子寬度的50%.

5、子盒子設定margin-left:-150px，讓盒子向上行走自身寬度的一半，實現子盒子水平居中.

效果:

方法四:tansform

子絕父相:子盒子position:absolute,父盒子position:relative;

子盒子

1.top:50%;

2.left50%;

3.tansform:tanslate(-50%,-50%);

效果:

方法五:父盒子flex彈性佈局

父盒子設定:

1.display:flex;

2.justify-content:center;

3.items-align:center;

效果:

 總結:

1.第一種方法是塊級元素水平居中,後四種方法是使塊級盒子水平垂直居中;

2.<a>和<span>等行內元素水平居中,給父元素設定text-align:center屬性;

3.文字垂直居中使用line-height:盒子的高度+px;

4.文字精準對齊使用line-height:1;實現去掉文字自帶的頂端和底部的空白部分;

5.行內塊元素<input>、<img>、<button>、<select>垂直居中使用vertical-align:top/middle/bottom.