Welcome To Ask or Share your Answers For Others

css - How to horizontally center a floating element of a variable width?

Welcome To Ask or Share your Answers For Others

1 Answer

answered Oct 17, 2021 by 深蓝 (71.8m points)

Assuming the element which is floated and will be centered is a div with an id="content" ...

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

And apply the following CSS:

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Here is a good reference regarding that.

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...