如何使用CSS轻松地将<div>水平居中？</div>

时间：2009-03-06 08:51:08

标签： css html

我正在尝试将<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

22 个答案:

答案 0 :(得分：755)

如果是非固定宽度 div（即您不知道div将占用多少空间）。

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

请注意#yourdiv的宽度是动态的 - ＆gt;它会增长和缩小以容纳其中的文本。

您可以在Caniuse

上查看浏览器兼容性

答案 1 :(得分：560)

在大多数浏览器中，这都可行：

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

在IE6中，您需要添加另一个外部div：

div.layout {
  text-align: center;
}

div.centre {
  text-align: left;
  width: 200px;
  background-color: #eee;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
<div class="layout">
  <div class="centre">Some Text</div>
</div>

答案 2 :(得分：56)

margin: 0 auto;

为ck has said，所有浏览器都不支持min-width

答案 3 :(得分：39)

问题的标题和内容实际上是不同的，因此我将使用Flexbox发布两个解决方案。

在IE8和IE9被完全销毁的时候，我猜Flexbox将替换/添加到当前的标准解决方案;）

检查当前的Browser compatibility table for flexbox

单个元素

＆＃13;
＆＃13; 
.container {
  display: flex;
  justify-content: center;
}
＆＃13; 
<div class="container">
  <img src="http://placehold.it/100x100">
</div>
＆＃13;
＆＃13;
＆＃13;

多个元素，但只有一个

默认行为是flex-direction: row，它会将所有子项对齐在一行中。将其设置为flex-direction: column将有助于堆叠线。

＆＃13;
＆＃13; 
.container {
  display: flex;
  flex-direction: column;
}
.centered {
  align-self: center;
}
＆＃13; 
<div class="container">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
   </p>
  <div class="centered"><img src="http://placehold.it/100x100"></div>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：28)

CSS ， HTML ： 

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

您的图表也显示了一个块级元素（通常是div），而不是内联元素。

在我的头脑中，FF2 + / Safari3 + / IE7 +支持min-width。可以使用hackety CSS或简单的JS来为IE6做。

答案 5 :(得分：27)

如果旧浏览器不是问题，请使用HTML5 / CSS3。如果是，请应用polyfill并仍然使用HTML5 / CSS3。我假设你的div在这里没有边距或填充，但它们相对容易解释。代码如下。

n

这是做什么的：

  1. 将.centered { position: relative; left: 50%; transform: translateX(-50%); } 相对于其容器定位;
  2. 将div的左边界水平放置在其容器宽度的50％处;
  3. 水平翻译50％的 div自己的宽度。

    4. 很容易想象这个过程确认div最终将水平居中。作为奖励，您可以垂直居中，无需额外费用：

    div

    这种方法的优点是你不必做任何违反直觉的事情，例如考虑你的div文本，将它包装在一个（通常在语义上无用的）附加容器中，或给它一个固定的宽度，这并非总是可行。

    如果需要，请不要忘记.centered-vertically { position: relative; top: 50%; transform: translateY(-50%); } 的供应商前缀。

答案 6 :(得分：26)

.center {
   margin-left: auto;
   margin-right: auto;
}

最小宽度不是全局支持的，但可以使用

实现 
.divclass {
   min-width: 200px;
}

然后你可以将你的div设置为

<div class="center divclass">stuff in here</div>

答案 7 :(得分：11)

您应该在父元素上使用using (TextReader reader = new StringReader(content)) 和position: relative，然后在要居中的子元素上使用text-align: center。这是一个简单的CSS设计模式，适用于所有主流浏览器。以下是一个示例，或查看CodePen Example。

display: inline-block
p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}

答案 8 :(得分：9)

您可以在css上使用margin: 0 auto而不是margin-left: auto; margin-right: auto;

答案 9 :(得分：8)

请使用以下代码，您的div将位于中心。

.class-name {
    display:block;
    margin:0 auto;
}

答案 10 :(得分：5)

如果您知道div的宽度并且它已修复，则可以使用以下css：

margin-left: calc(50% - 'half-of-your-div-width');

其中'你的一半宽度'应该（显然）是div宽度的一半。

答案 11 :(得分：5)

九年后，我认为是时候推出新版本了。这是我的两个（现在是一个）收藏夹。

<强>保证金

将margin设为auto。您应该知道方向序列为margin: *top* *right* *bottom* *left*;或margin: *top&bottom* *left&right* 

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

中心：已删除，请勿使用此功能！

使用<center></center>标记环绕<div></div>。

示例：

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>
            <center>
                <div>The div</div>
            </center>
        </article>
    </body>
</html>

答案 12 :(得分：3)

如果您的<div>有position: absolute，则需要使用width: 100%; 

#parent {
    width: 100%;
    text-align: center;
}

    #child {
        display: inline-block;
    }

答案 13 :(得分：3)

＆＃13;
＆＃13; 
.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
＆＃13; 
<div class="center">
  <div>You text</div>
</div>
＆＃13;
＆＃13;
＆＃13;

JsFiddle

答案 14 :(得分：2)

我在这里添加正确答案

您可以使用此代码段并自定义。这里我使用2个子块。这应该显示页面的中心。 您可以使用一个或多个块。

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>

答案 15 :(得分：1)

在你的html文件中写道：

<div class="banner">
  Center content
</div>

你写的css文件：

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

适合我。

答案 16 :(得分：1)

margin-left的使用：auto和margin-right：auto在某些情况下可能无效。这是一个永远有效的解决方案。您指定所需的宽度，然后将左边距设置为剩余宽度的一半。

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>

答案 17 :(得分：1)

将此类添加到您的css文件中，它将完美地运行 要做的步骤：

1）创建第一个

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2）将此添加到您的CSS 

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
}

答案 18 :(得分：0)

对此问题的最佳回答是使用margin-auto但是要使用它，您必须知道width或div中px的{​​{1}}。

CSS代码：

%

答案 19 :(得分：0)

我将div和span标签与css属性一起使用，例如块，跨浏览器内联块和文本对齐中心，请参阅我的简单示例

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>

答案 20 :(得分：-3)

使用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"
    });
});

或者，如果你想将每个元素集中在类＆＃34; .myElement＆＃34;：

$(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"
        });
    });
});

答案 21 :(得分：-4)

你可以使用这个位置：relative;然后设置左侧和顶部值：

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}
相关问题
最新问题