如何居中一个设置了浮动的元素

最新推荐文章于 2022-05-19 18:36:14 发布

枫叶流丹

最新推荐文章于 2022-05-19 18:36:14 发布

阅读量3.3k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/ziminghuohua/article/details/73724699

版权

　　对于一个没有浮动的元素，我们通常可以通过对其设置margin:0 auto;来实现元素的居中，但是这个方法对于浮动元素却失去了作用，其实我们可以理解的是，在脱离文档流后，浮动的力量其实就是auto的力量，所以他它会自动向左浮动。

　　那么，此情此景，应该怎么样来实现居中的效果呢？仔细考虑，会有这样一个方法。

　　首先给此元素设置一个宽度值，先设置它的 margin-left:50%，这个时候元素的左边缘正好位于其父元素的中央，然后设置其position:relative;left:负本元素宽度的一半，这样的目的是将本元素向左移动其宽度的一半，这个时候可保证本元素的中间点位于父元素的中央。垂直居中：display: table-cell;vertical-align: middle;实例代码如下：
　　

<!DOCTYPE html>
<html>
<head>
    <title>居中一个浮动元素</title>
    <style type="text/css">
        .content{
            height: 500px;
            width: 500px;
            border: 1px solid red;
            /*垂直居中*/
            display: table-cell;
            vertical-align: middle;
        }
        .left{
            height:100px;
            width: 100px;
            border: 1px dashed blue;
            /*水平居中，但设置浮动后失效
            margin: 0 auto;*/
            float: left;
            /*水平居中*/
            margin-left: 50%;
            position: relative;
            left: -50px;

        }
    </style>
</head>
<body>
    <div class="content">
        <div class="left"></div>
    </div>
</body>
</html>