logo标签列表

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

csshtml
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
我不喜欢这些答案中的任何一个。如果您不知道宽度，该怎么办？例如，它可能只是一个单词。 - RGBK
1
需要注意的是，如果宽度为100％，则对齐将不起作用。 - Amol M Kulkarni
2
我刚刚发现了一个名为webgenerator的网站：http://howtocenterincss.com/ 它可以帮你把任何想要居中的元素居中，无论你想怎样居中。 ;) - Sylhare
做这个：div.e1{text-align: center;} - monkey
22个回答
8
如果您知道您的div的宽度且它是固定的，您可以使用以下CSS：
margin-left: calc(50% - 'half-of-your-div-width');

其中'half-of-your-div-width'应该是您的div宽度的一半。

5

在你的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;
    display: table;
}
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>

3

如果您的 <div> 使用了 position: absolute 属性，您需要使用 width: 100%; 属性。

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

    #child {
        display: inline-block;
    }
3

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

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

JsFiddle

这对我很有帮助，特别是帮助居中整个 div 而不仅仅是其中的文本。 - thnkwthprtls
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>
1
这个问题最好的解决方法是使用margin-auto，但在使用它之前，您必须知道您的div的width是以px或%为单位的。

CSS代码：

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}
你可以使用margin: 0 auto;代替margin-left:auto;和margin-right:auto;。 - CoderPi
1
在你的 HTML 文件中写下以下内容：
<div class="banner">
  Center content
</div>

你编写的css文件：

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

适用于我。

1

使用margin-left:auto和margin-right:auto在某些情况下可能无法正常工作。这里有一个始终有效的解决方案。您可以指定所需的宽度，然后将左边距设置为剩余宽度的一半。

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>
0
我使用div和span标签配合CSS属性，例如block、跨浏览器的inline-block和居中对齐(text-align center)，请看我的简单示例。
<!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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接