关于html：如何使用CSS垂直居中文本？


How do I vertically center text with CSS?

本问题已经有最佳答案，请猛点这里访问。

我有一个包含文本的DIV元素，我想将这个DIV的内容垂直居中对齐。

这是我的DIV样式：

1
2
3
4
5
6
7
8
#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
1
  Lorem ipsum dolor sit

最好的方法是什么？

相关讨论

您可以尝试以下基本方法：

1
2
3
4
5
6
div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
1
  Hello World!

但是它只适用于一行文本，因为我们将行的高度设置为与包含框元素相同的高度。

更通用的方法

这是另一种垂直对齐文本的方法。此解决方案适用于单行和多行文本，但仍需要固定高度的容器：

1
2
3
4
5
6
7
8
9
10
11
div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
1
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>

CSS只是调整的大小，通过设置的行高等于其高度，垂直居中对齐，并使与vertical-align: middle成为一个内联块。然后，它将的行高设置回正常值，使其内容物在块内自然流动。

模拟台显示

还有一个选项，它可能不适用于不支持display: table和display: table-cell的旧浏览器(基本上只支持Internet Explorer 7)。使用CSS我们模拟表行为(因为表支持垂直对齐)，HTML与第二个示例相同：

1
2
3
4
5
6
7
8
9
10
11
div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
1
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>

使用绝对定位

此技术使用绝对定位的元素，将顶部、底部、左侧和右侧设置为0。在《粉碎》杂志上的一篇文章中更详细地描述了CSS中的绝对水平和垂直居中。

相关讨论

另一种方法(这里还没有提到)是使用flexbox。

只需向container元素添加以下代码：

1
2
3
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

FRAMBOX演示1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
1
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh

或者，当flex容器中只有一个flex项时，flexbox也可以将flex项居中，而不是通过容器对齐内容(如上面问题中给出的示例)。

因此，要使柔性项目水平和垂直居中，只需使用margin:auto设置它。

FRAMBOX演示2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
1
  <span>margin:auto on a flex item centers it both horizontally and vertically</span>

注：以上均适用于水平排列时对中项目。这也是默认行为，因为默认情况下，flex-direction的值为row。但是，如果需要在垂直列中布置柔性项目，则应在容器上设置flex-direction: column以将主轴设置为列，另外，justify-content和align-items属性现在与justify-content: center垂直居中和align-items: center水平居中相反。

flex-direction: column演示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <p>

    When flex-direction is column...
 
</p>
  <p>

   "justify-content: center" - vertically aligns
 
</p>
  <p>

   "align-items: center" - horizontally aligns
 
</p>

从flexbox开始了解它的一些特性并获得最大浏览器支持的语法是flexybox。

而且，现在的浏览器支持非常好：canius

对于与display: flex和align-items的跨浏览器兼容性，可以使用以下选项：

1
2
3
4
5
6
7
8
9
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
相关讨论

您可以通过添加以下CSS代码轻松做到这一点：

1
2
display: table-cell;
vertical-align: middle;

这意味着你的CSS最终看起来像：

1
2
3
4
5
6
7
8
9
10
11
12
13
#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
1
  Some text

相关讨论

供参考，并添加一个更简单的答案：

纯CSS：

1
2
3
4
5
6
7
.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

或作为SASS/SCSS混音：

1
2
3
4
5
6
7
@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

使用：

1
2
3
.class-to-center {
    @include vertical-align;
}

塞巴斯蒂安·埃克斯特？M的博客文章垂直对齐任何东西只需3行CSS：

此方法会导致元素由于放置在"半像素"上而变得模糊。解决方法是将其父元素设置为preserve-3d。如下所示：

1
2
3
4
5
.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

我们生活在2015年以上，每个主要的现代浏览器都支持flex box。

这将是网站的制作方式。

学会了！

相关讨论

所有的信用都归这个链接所有者@sebastian ekstr所有？M链接；请检查一下。在行动代码中看到它。通过阅读上面的文章，我还创建了一个演示小提琴。

只要有三行CSS(不包括厂商前缀)，我们就可以通过转换来实现这一点：translatey垂直居中，不管我们想要什么，即使我们不知道它的高度。

CSS属性转换通常用于旋转和缩放元素，但通过它的translatey函数，我们现在可以垂直对齐元素。通常这必须通过绝对定位或设置行高来完成，但这要求您要么知道元素的高度，要么只在单行文本上工作，等等。

为此，我们写下：

1
2
3
4
5
.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

这就是你所需要的。这是一种类似于绝对位置方法的技术，但其优点是我们不必在父级上的元素或位置属性上设置任何高度。即使在Internet Explorer 9中，它也可以直接运行。

为了使其更简单，我们可以将其编写为带有供应商前缀的mixin。

相关讨论

CSS 3中引入的flexbox是解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 3px solid orange;
    background-color: gold;
}

p {
    margin: auto; /* Important */
    text-align: center;
    font-family: Calibri;
    background-color: yellow;
    border-radius: 20px;
    padding: 15px;
}
1
2
3
4
5
6
7
8
<section>
    <p>

        I'm centered!<br/>
        Flexboxes are great!
   
</p>
</section>

注意：如果要将文本居中，请将上面标记为重要的行替换为以下行之一：

1)仅垂直：

1
margin: auto 0;

2)仅水平：

1
margin: 0 auto;

正如我注意到的，这个技巧也适用于网格(显示：网格)。

相关讨论

灵活的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom: 5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
1
2
3
4
5
6
7
8
9
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>


  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>


  <span>Lorem ipsum dolor sit amet.</span>

作为答案接受的解决方案是完美的使用line-height与div的高度相同，但当文本被包装或是在两行中时，该解决方案不能完美地工作。

如果文本被换行或在一个分区内有多行，请尝试使用此方法。

1
2
3
4
5
#box
{
  display: table-cell;
  vertical-align: middle;
}

有关更多参考，请参见：

  • 垂直居中多行文字

  • 使用CSS进行垂直居中的6种方法

尝试此解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.EXTENDER {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

.PADDER-CENTER {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
1
    Edit this text...

使用css+生成。

您还可以使用以下属性。

1
2
3
display: flex;
align-content: center;
justify-content : center;
相关讨论

另一种方式：

不要设置div的height属性，而是使用padding:来达到效果。与行高类似，只有一行文本才有效。虽然这样，如果您有更多的内容，文本仍然会居中，但是DIV本身会稍大一些。

因此，与其去：

1
2
3
4
div {
  height: 120px;
  line-height: 120px;
}

你可以说：

1
2
3
div {
   padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}

这会将div的顶部和底部padding设置为60px，将左侧和右侧padding设置为零，使div的120像素(加上字体的高度)高，并将文本垂直居中于DIV。

可以使用以下代码段作为引用。它对我来说就像一个魅力：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
    <html lang="de">
        <head>
            Vertically Center Text
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>

        <body style="background:#3cedd5">
           
                Yes, it's my landing page
                Under construction, coming soon!!!
           
        </body>
    </html>

以上代码段的输出如下：

Enter image description here

源代码贷记：如何用CSS垂直居中文本？-代码普朗

为了你所有的垂直校准需要！

声明此混音：

1
2
3
4
5
6
7
@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在元素中：

1
2
3
.element{
    @include vertical-align();
}
相关讨论

更好的办法。你也可以这样做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,
html {
  height: 100%;
}

.parent {
  white-space: nowrap;
  height: 100%;
  text-align: center;
}

.parent:after {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  content: '';
}

.centered {
  display: inline-block;
  vertical-align: middle;
  white-space: normal;
}
1
2
3
    <p>
Lorem ipsum dolor sit amet.
</p>

这是另一个使用flexbox的选项。

HTML

1
2
3
4
    <span
      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
      nemo.</span
    >

CSS

1
2
3
4
5
6
7
  #container {
    display: flex;
  }

  .child {
    margin: auto;
  }

结果

Enter image description here

我不确定是否有人走了writing-mode的路线，但我认为它能很好地解决问题，并有广泛的支持：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
1
      I'm centered in the vertical and horizontal thing

当然，这将适用于您需要的任何维度(除了父级的100%)。如果您取消对边框线的注释，熟悉它将有助于您自己。

jsFiddle演示供您摆弄。

Canius支持：85.22%+6.26%=91.48%(即使Internet Explorer也在！)

简单和通用的方法是表格方法)：

1
2
3
4
5
6
7
8
9
[ctrv]{
    display:table !important;
}

[ctrv] > *{ /* adressing direct discendents */
      display: table-cell;
      vertical-align: middle;
      // text-align: center; /* optional */
}

在父标记上使用此属性(或等效类)甚至对许多要对齐的子标记也有效：

1
<parent ctrv>  <ch1/>  <ch2/>   </parent>

对于单行文本(或单个字符)，可以使用以下技术：

当#box具有非固定的相对高度(以%为单位)时，可以使用。

1
2
3
4
5
6
7
8
9
10
11
#box::before {
    display: block;
    content:"";
    height: 50%;
}

#box::after {
    vertical-align: top;
    line-height: 0;
    content:"TextContent";
}

在jsbin(更容易编辑css)或jsfiddle(更容易更改结果帧的高度)上查看实时演示。

如果要将内部文本放在HTML中而不是CSS中，则需要在附加的inline元素中包装文本内容，并编辑#box::after以匹配它。(当然，应删除content:财产。)

例如，TextContent。在这种情况下，#box::after应替换为#box span。

对于Internet Explorer 8的支持，您必须用:替换::。

相关讨论

一个非常简单且功能最强大的垂直居中解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
.outer-div {
  height: 200px;
  width: 200px;
  text-align: center;
  border: 1px solid #000;
}

.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  color: red;
}
1
  <span class="inner">No data available</span>

相关讨论

尝试转换属性：

1
2
3
4
5
6
7
8
 #box {
  height: 90px;
  width: 270px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

我看到了前面的答案，它们只适用于屏幕的宽度(没有响应)。为了提高反应能力，你必须使用弹性。

例子：

1
div{ display:flex; align-item:center;}

以下代码将把DIV放在屏幕中间，而不管屏幕大小或div大小如何：

1
2
3
4
5
6
7
8
.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
1
2
3
4
5
6
7
8
9
 <html>
 <head>
 </head>
 <body>
 
 I'm in the center
 
 </body>
 </html>

在这里可以看到更多关于flex的详细信息。

尝试以下代码：

1
2
display: table-cell;
vertical-align: middle;

1
2
3
4
5
6
7
8
9
10
11
div {
  height: 80%;
  width: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: #4CAF50;
  color: #fff;
  font-size: 50px;
  font-style: italic;
}
1
  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

我需要一排可点击的大象，垂直居中，但不需要使用表格来绕过一些Internet Explorer 9的怪异之处。

我最终找到了最好的CSS(满足我的需求)，它非常适合使用火狐、Chrome和Internet Explorer 11。很遗憾，Internet Explorer 9还在嘲笑我…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div {
  border: 1px dotted blue;
  display: inline;
  line-height: 100px;
  height: 100px;
}

span {
  border: 1px solid red;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

.out {
  border: 3px solid silver;
  display: inline-block;
}
1
2
3
4
5
6
7
   <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span>
   <span>A lovely clickable option.</span>



   <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span>
   <span>Something charming to click on.</span>

显然你不需要边界，但是它们可以帮助你了解它是如何工作的。

我只想扩展Michielwoo的答案，以释放对线条高度和DIV高度呼吸的需求。它基本上只是这样一个简化版本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
div {
  width: 250px;
  /* height: 100px;
  line-height: 100px; */
  text-align: center;
  border: 1px solid #123456;
  background-color: #bbbbff;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
1
2
3
4
5
  <span>All grown-ups were once children... but only few of them remember it</span>



  <span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>

注：随附的div的fixed-height需要部分css注释。

您可以使用CSS中的定位方法：

在这里检查结果……

HTML：

1
2
3
4
5
  <p>

    Make me vertical align as center
 
</p>

CSS：

1
2
.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}

希望你也用这个方法。

这很简单也很短：

1
2
3
4
5
6
7
8
9
10
11
12
.block {
  display: table-row;
  vertical-align: middle;
}

.tile {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 500px;
  height: 100px;
}
1
2
3
  <span class="tile">
    Hello middle world! :)
  </span>

相关讨论

如果你不在乎它的视觉3D效果，把它设置在button而不是div中。

1
2
3
4
5
6
7
8
9
#box
{
  height: 120px;
  width: 300px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
}
1
2
3
<button Id="box" disabled>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</button>

绝对定位和拉伸

与上面的方法一样，这个方法首先将父元素和子元素上的定位分别设置为相对和绝对。从那里情况不同。

在下面的代码中，我再次使用了这个方法来使孩子在水平和垂直方向上居中，尽管您只能使用这个方法来垂直居中。

HTML

1
    Content here

CSS

1
2
3
4
5
6
7
8
9
10
11
#parent {position: relative;}
#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

该方法的思想是通过将顶部、底部、右侧和左侧的值设置为0，尝试使子元素拉伸到所有四个边。因为子元素比父元素小，所以它不能到达所有四个边。

但是，将auto设置为所有四个边上的边距会导致相反的边距相等，并在父分区的中心显示子分区。

不幸的是，上面的内容在Internet Explorer 7及更低版本中不起作用，并且与前面的方法一样，子DIV中的内容可能会变得太大，从而导致隐藏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <style>
      .main{
        height:450px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        -webkit-box-align: center;
        align-items: center;
        justify-content: center;
        width: 100%;
      }
    </style>
  </head>
  <body>
   
      Hello
   
  </body>
</html>
1
.element{position: relative;top: 50%;transform: translateY(-50%);}

在元素的css属性中添加这个小代码。真是太棒了。试试看！

只要你想垂直居中，你就可以试试display:table-cell和vertical-align:middle。

例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#box
{
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
}
1
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

较新的浏览器现在支持css calc功能。如果您的目标是这些浏览器，您可能希望查找这样的操作：

1
2
3
  <span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">
    Here are two lines that will be centered even if the parent div changes size.
  </span>

关键是在绝对或相对定位的父分区内使用style ="top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;"。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.box {  
  width: 100%;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}

.height {
  line-height: 170px;
  height: 170px;
}

.transform {
  height: 170px;
  position: relative;
}

.transform p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
1
2
3
4
5
6
7
8
9
10
11
12
<h4>Using Height</h4>

  Lorem ipsum dolor sit


<hr />

<h4>Using Transform</h4>

  <p>
Lorem ipsum dolor sit
</p>

相关讨论

以下是工作代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body{
  margin:0;
}
div {
  height: 80px;
  background: #171717;
  font-size: 24px;
  text-align: center;
  font-style: normal;
  color: #FFF;
  margin-top: 18px;
  margin-left: 4px;
  line-height: 80px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    Align text vertically center in div using CSS
  </head>

  <body>
   
      <span><a class="btn" href="http://ownanswers.com/"
               rel="dofollow">OwnAnswers.com
      </span>
      For asking your questions, visit this site.
   
  </body>
</html>

结果

Enter image description here

一种更好、更简单、反应迅速的方法是将CSS中的margin-top设置为45%左右：

1
margin-top: 45%;

你可能要玩这个号码，但它会在周围的分区的中心。

相关讨论

这很管用。

必须对内容使用DIV表格样式和居中对齐。

相关讨论

1
2
3
4
5
6
7
8
9
10
11
.text{
   background: #ccc;
   position: relative;
   float: left;
   text-align: center;
   width: 400px;
   line-height: 80px;
   font-size: 24px;
   color: #000;
   float: left;
 }
相关讨论