行内元素与块级元素垂直居中

行内元素的垂直居中:
1. 给块级元素中的想要居中的行内元素设置: vertical-align: middle
这表示这些行内元素是以它们各自的中间的位置来与其他行内元素对齐的;
若还是没对齐的话,可通过在这些行内元素的父元素中设置line-height
来调节.

2. 若行内元素的父元素高度不定,可通过设置行内元素的padding: 20px 0;
这样上下的padding一致就可达到垂直居中.

块级元素的垂直居中:
1. 若父元素高度不定,那么可以通过设置padding: 100px 0;
这样块级子元素就会在父元素中垂直居中.

2. 使用line-height(父元素高度确定):
- 在父元素中设置line-height为父元素的高度
- 在块级子元素中设置:
display: inline-block;
vertical-align: middle;

3. 使用绝对定位(父元素高度确定):
步骤: 1. 父元素为position: relative
2. 块级子元素: position: absolute
top: 50%;
margin-top: -(块级子元素高度的一半)

若想要设置左右居中的话:
left: 50%;
margin-left: -(块级子元素宽度的一半)