css如何百分比居中 |css3 flex clear

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

以上CSS代码可以让一个元素在其父元素中垂直和水平方向上都居中。使用position属性将这个元素定位为绝对位置，使用top和left属性将这个元素的上边和左边都向父元素的中心偏移50%。最后使用transform属性将元素沿x轴和y轴分别向左上角偏移自己宽高的一半，使元素在父元素中垂直和水平方向上都居中。

这个方法的优点是可以适应不同尺寸的元素和父元素，但缺点是需要使用绝对定位，可能会对页面布局造成影响。

另外，可以使用flex布局来实现居中，代码如下：

.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
width: 50%;
height: 50%;
}

这个方法同样可以让元素在其父元素中垂直和水平方向上都居中。使用display: flex属性将父元素设为弹性容器，使用justify-content和align-items属性将子元素在水平和垂直方向上都居中。缺点是不支持低版本浏览器。

以上是两种常见的百分比居中方法，掌握它们可以让你在页面布局时更加灵活。