CSS技巧心得記錄

佈局方式

一、div垂直對齊

1、子元素寬高已知

待對齊的子元素寬高已知，父元素寬高會改變。

解決方案：父元素設置相對定位（relative）。子元素設置絕對定位（absolute），向下移動50%高度再用負margin往上回移子元素高度的一半。

 

2、子元素寬高未知

待對齊的子元素寬高未知，父元素寬高會改變。

解決方案：利用行內級元素垂直對齊屬性。父元素設置空字符的僞元素，disp設置爲inline-block，將其高度設置爲100%（繼承父元素），對齊方式vertical-align爲middle。子元素display設置爲成inline-block，對齊方式vertical-align爲middle。

/*父元素內容水平居中*/
.block {
  text-align: center;
}
 

/*插入僞元素，高度100%並垂直居中*/
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/*子元素變成inline-block並垂直居中*/
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}