总结一下水平居中和垂直居中的方法,欢迎交流指正,共同进步!
1.水平居中
1.1):行内元素水平居中,在其父类设置text-align:center;
1.2): 块级元素水平居中有三种
第一种:定宽的块级元素,可以设置margin:0 auto;
第二种:把块级元素放进table的td里面,然后设置table的左右水平居中margin: 0 auto;
第三种:不定宽的块级元素 可以通过设置display:inline,转换成行内元素,再设置text-align:center;
第四种:不定宽的块级元素 可以通过对其父元素设置float:left;position:relative;left:50%,子元素设置position:relative;left:-50%;实现水平居中
2.垂直居中
2.1)父级高度确定的单行文本
可以通过设置行高line-height与高度一致,实现垂直居中
2.2)父级高度确定的多行元素
可以通过设置
<table>
<tbody>
<tr>
<td>需要居中的元素</td>
</tr>
<tbody>
</table>
2.3)父级高度确定的多行元素
可以通过设置父元素display:table-cell来激活vertical-align,再对其设置属性middle