1.dispaly:inline-block
- 需有参照空元素;
- 例如:空元素为<span></span>,span应和需居中元素(img等)为平级标签,将span设置宽度为0,高度为父容器高度,居中方式为vertical-align:middle;
-
同时将需居中元素设置为vertical-align:middle。
注:为避免部分块状元素拥有默认高度,应给元素添加声明:font-size:0;
2.height:line-height
- 行高=容器高度,可实现单行文本在容器中垂直居中对齐。
注:为避免部分块状元素拥有默认高度,应给元素添加声明:font-size:0;
3.display:table-cell
- 将元素类型转换为<td>标签的元素类型:display:table-cell;
- 无需1方法中的参照元素,直接设置vertical-align:middle即可。
注:为避免部分块状元素拥有默认高度,应给元素添加声明:font-size:0;
4.定位方式1
- 子元素设置position:absolute脱离标准文档流;
- 父元素设置position:relative不脱离标准文档流;
- 其他属性:left:50%;top:50%;margin:-height/2 0 0 -width/2;
5.定位方式2
- 子元素设置position:absolute脱离标准文档流;
- 父元素设置position:relative不脱离标准文档流;
- 其他属性:left:0;top:0;right:0;bottom:0;margin:auto;
6.display:flex
- 将其父元素设置为弹性盒子dispaly:flex;
- 设置主轴对齐方式justify-content:center;
- 设置侧轴对齐方式align-items:center;
拓展:如何将元素在浏览器可视窗口居中?
将4或5方式中的定位方式设置为固定定位即可。position:fixed。