方法一:针对文字、行元素水平居中、垂直居中
{text-align: center; // 水平居中line-height: 盒子高度; // 垂直居中,只适合行元素}
优势:简单、实用;
劣势:只适合单行的文字、行元素内容;
方法二:基于已知盒子宽度、高度的情况下,实现盒子居中;
{position: absolute;top: 50%;left: 50%;width: 200px;height: 100px;margin-top: -50px; // 盒子的一半高度margin-left: -100px; // 盒子的一半宽度}// 以上代码可优化为下方代码:{position: absolute;width: 200px;height: 100px;top: calc(50% - 50px);left: calc(50% - 100px);}
优势:行元素、块元素均可实现居中;
劣势:需要固定盒子的宽、高;
方法三:使用绝对定位 + CSS变形 实现盒子居中
{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
优势:行元素、块元素均可实现居中,且不需要固定盒子的宽、高;
劣势:当盒子的高度超高屏幕的高度,盒子的顶部会被视口裁切掉;【视口:表示视觉看到的屏幕宽高】
方法四:使用flex布局实现盒子居中
// 父盒子{display: flex;}// 子盒子{margin: auto;}
优势:实现简单,不需要对父盒子、子盒子的大小进行任何设置;
劣势:一些低版本的浏览器可能不支持;
方法五:使用 vertical-align + line-height 属性垂直居中
.div {width: 364px;height: 221px;line-height: 221px;text-align: center;img {vertical-align: middle;width: 48px;height: 48px;}}
优势:实现简单、方便,与方法一类似;
劣势:需要知道父容器的高度,适用于div中的图片垂直居中等场景;
以上内容是本人在开发中总结的居中方法,如有雷同,纯属巧合!另外,如有错误,欢迎指出!