1. 使用变换(Transform)
(1)当元素的宽度和高度未知时;
(2)卡片式弹出框中有多个子元素,其中一个焦点元素位于中心
center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. 使用Flex
(1)当有一个或多个元素要居中时;
(2)当子元素是动态的并且大小未知时;
(3)当有一行项目需要像页脚一样居中时。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
当有多个元素需要一个在另一个元素上方堆叠,并使该元素堆叠在其中心时,我们只需添加以下代码行:
flex-direction: column;