使用float和position来使元素居中出现的问题

发布于
2017-01-14

请问#one中的图片描述 float：left起什么作用？我把它去掉以后就不会居中了

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #one{
            position: relative;
            left: 50%;
            border:1px solid;
            
        }
        #two{
            width: 400px;
            height: 200px;
            background: gray;
            position: relative;
            left: -50%;
        }
    </style>
</head>
<body>
    <div id="one">
        <div id="two"></div>
    </div>
</body>

css html

阅读 2.5k

2 个回答

得票最新

toBeTheLight

16.6k41634

发布于
2017-01-14

✓ 已被采纳

使用display:inline-block也是一样的。
目的是使#one变成行内块，宽度由子元素#two撑开，而不是占满父元素body的宽度。
这样#two的left: -50%;就会相对于自身宽度（父元素宽度，但是两者相等）向左移动50%，达到#two居中的效果。