css 浮动后居中对齐 |css div 九宫格

CSS 浮动是创建网页布局的重要元素之一。它可以使得大家的网页更加简洁、紧凑。但是，当大家对浮动元素进行居中对齐时，就需要用到一些额外的技巧。 浮动元素默认是左对齐的，如果想要使它居中对齐，大家首先需要将它的宽度设置为固定值，也就是通过宽度属性来控制。接着，大家需要给浮动元素的父元素设置 text-align:center，这样可以让其中间的内容水平居中。 但是，这样只是让浮动元素水平居中了，纵向居中还需要进行另外的设置。一般来说，大家会给浮动元素的父元素设置一个高度，然后利用 CSS in the middle 的技巧，即将父元素的 position 设置为 relative，子元素的 position 设置为 absolute，再通过 top 和 left 属性来控制子元素的位置。 代码如下：

<style>
.container {
position: relative;
height: 400px; /* 父元素高度 */
text-align: center;
}
.box {
float: left;
width: 200px; /* 子元素宽度 */
height: 200px; /* 子元素高度 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<div class="container">
<div class="box"></div>
</div>

通过上面的代码，大家可以将浮动元素实现水平和垂直居中对齐。可以根据实际需求来设置父元素的高度、子元素的宽、高等属性。 总结起来，通过设置浮动元素的宽度、父元素的 text-align 属性、父元素和子元素的高度、父元素和子元素的 position 属性及 top 和 left 属性，大家可以轻松地实现浮动元素的居中对齐。