CSS进阶篇--CSS让浮动元素水平居中

2024年1月14日 169次阅读 来源: 风雨后见彩虹

对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中。

对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。如下：

HTML 代码：

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

CSS 代码：

.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}

这样就解决了浮动元素水平居中了；

父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000003746646
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞