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;
}