如何使用CSS轻松水平居中一个<div>？

Question

如何使用CSS轻松水平居中一个<div>？

748

我正在尝试水平居中一个页面上的 <div> 块元素，并将其设置为最小宽度。这样做的最简单方法是什么？我希望该 <div> 元素与页面的其他部分在同一行内。我尝试画一个示例：

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

- Casey

我不喜欢这些答案中的任何一个。如果您不知道宽度，该怎么办？例如，它可能只是一个单词。 - RGBK

1

需要注意的是，如果宽度为100％，则对齐将不起作用。 - Amol M Kulkarni

2

我刚刚发现了一个名为webgenerator的网站：http://howtocenterincss.com/ 它可以帮你把任何想要居中的元素居中，无论你想怎样居中。 ;) - Sylhare

做这个：div.e1{text-align: center;} - monkey

22个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Riccardo Volpe · Answer 1

使用jQuery：

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

或者，如果你想要将所有带有类名 ".myElement" 的元素居中：

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});

- goli55 · Answer 2

你可以使用position:relative; 然后设置left和top的值：

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}