css设置内容居中

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;