css盒子在盒子里居中 |css3 心跳动画

CSS盒子在盒子里居中是一个经常遇到的布局问题。下面将介绍几种常用的解决方法。 第一种方法是使用flexbox。 在外部容器中使用display:flex;和justify-content: center; align-items: center;让子元素水平垂直居中。

.container {
display: flex;
justify-content: center;
align-items: center;
}

第二种方法是使用相对和绝对定位。 父元素设置position: relative;，子元素设置position:absolute;和top:50％;left:50％;同时配合transform将元素上移和左移50％的宽度和高度。

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

第三种方法是使用table。 将父元素设置为display: table;和text-align:center;，子元素设置为display: table-cell;和vertical-align:middle;元素变成表格单元格，表格单元格自然就居中了。

.parent {
display: table;
text-align: center;
}
.child {
display: table-cell;
vertical-align: middle;
}

以上是三种常用的方法，大家可以根据实际需求选择最适合的方法。