【CSS】垂直水平居中

沈梦研2024-12-07 20:21

经常会遇到各种情况下，比如具体不定宽高的元素，但是需要让元素垂直水平居中，这种情况下，有很多种方式，常用写法如下：

flex实现

javascript 复制代码

// 父元素
display: flex;
justify-content: center;
align-items: center;

table实现

javascript 复制代码

// 父元素
display: table-cell;
vertical-align: middle;
text-align: center;

CSS3实现

javascript 复制代码

// 父元素
position: relative; 

// 子元素
position: absolute;
top: 50%; // 将子元素左上角与父元素中心对齐，距离父元素上边缘50%距离
left: 50%; // 将子元素左上角与父元素中心对齐，距离父元素左边缘50%距离
transform: translate(-50%, -50%); 将子元素向左边平移子元素宽度的50%，向上边平移子元素宽度的50%，此时子元素的中心和父元素的中心刚好重合，即实现垂直水平居中