居中方式总结

水平居中的方法

• 元素为行内元素，设置父元素text-align:center
• 如果元素宽度固定，可以设置左右margin为auto;
• 绝对定位和移动: absolute + transform
• 使用flex-box布局，指定justify-content属性为 center
• display设置为tabel-ceil

垂直居中的方法

• 将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
• 行内元素设置 'height: 1ex'
• 使用flex布局，设置为align-item：center
• 绝对定位中设置bottom:0,top:0,并设置margin:auto
• 绝对定位中固定高度时设置top:50%; margin-top值为高度一半的负值
• 文本垂直居中设置line-height为height值, 如果是单行文本, line-height 设置成和 height 值

.vertical {
	height: 100px;
	line-height: 100px;
}

• 已知高度的块级子元素，采用绝对定位和负边距

.container {
	position: relative;
}
.vertical {
	height: 300px; /*子元素高度*/
	position: absolute;
	top: 50%; /*父元素高度50%*/
	margin-top: -150px; /*自身高度一半*/
}

• 未知高度的块级父子元素居中，模拟表格布局
• 缺点：IE67 不兼容，父级 overflow：hidden 失效

.container {
	display: table;
}
.content {
	display: table-cell;
	vertical-align: middle;
}

• 新增 inline-block 兄弟元素，设置 vertical-align
  • 缺点：需要增加额外兄弟标签做参照，IE67 不兼容

.container {
	height: 100%; /*定义父级高度，作为参考*/
}
.extra .vertical {
	display: inline-block; /*行内块显示*/
	vertical-align: middle; /*垂直居中*/
}
.extra {
	height: 100%; /*设置新增元素高度为100%*/
}

• 绝对定位配合 CSS3 位移

.vertical {
	position: absolute;
	top: 50%; /*父元素高度50%*/
	transform: translateY(-50%, -50%);
}

• CSS3 弹性盒模型

.container {
	display: flex;
	justify-content: center; /*子元素水平居中*/
	align-items: center; /*子元素垂直居中*/
}

对 line-height 是如何理解的

• line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
• 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
• 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
• 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
• line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

• 垂直方向：line-height
• 水平方向：letter-spacing 这是设置文字间隙