盒模型居中及水平垂直

6.盒模型居中及水平居中

1.常见盒模型元素

属性	注释
box-sizing:border-box	不计算 pading
background-clip:content-box	将 padding 裁剪出来
overflow: hidden	超出部分隐藏
overflow: auto	使用滚动条查看被隐藏的内容
height: auto	默认高度由内容撑开
min-height	最小高度当内容超过最小高度时会自动伸展
max-height	最大高度，一般配合 overflow：hidden 使用
text-align: center	规定元素中的文本的水平对齐方式
line-height	适合文字垂直居中
margin：auto	块级元素居中
position: relative	块级元素水平垂直居中，父级声明，二者缺一不可
position: absolute	块级元素水平垂直居中，当前元素声明，二者缺一不可

2.实现 padding 内容区可见及计算到元素内

padding: 2em;
/* 裁剪padding内容可见 */
background-clip: content-box;
/* 将 padding计算到元素大小内*/
box-sizing: border-box;

3.盒模型水平及垂直集中

<div class="box">
  <div></div>
</div>

/* \
1.块级元素水平垂直居中，父级声明position:relative;
2.然后再需要垂直居中的块级元素中添加
 position: absolute;生成绝对定位的元素，相对定位元素以外的第一个父元素进行定位
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 以上缺一不可 */
.box {
  width: 15em;
  height: 15em;
  border: 1px solid black;
  background-color: blue;
  position: relative;
}
.box > div {
  width: 5em;
  height: 5em;
  background-color: yellow;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}