关于css：如何为所有浏览器垂直居中div？


How to vertically center a div for all browsers?

我想用CSS将div垂直居中。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但都缺少Internet Explorer 6支持。

1
2
3
<body>
    Div to be aligned vertically
</body>

如何在所有主要浏览器(包括Internet Explorer 6)中垂直居中div？

相关讨论

下面是我能建立的最好的全方位解决方案，垂直和水平居中一个固定宽度，灵活高度的内容框。它经过测试，并在最新版本的火狐、Opera、Chrome和Safari上运行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /*whatever width you want*/
}
1
2
3
4
      The Content
      <p>
Once upon a midnight dreary...
</p>

。

查看具有动态内容的工作示例

我内置了一些动态内容来测试灵活性，并且希望知道是否有人看到它的任何问题。它也可以很好地用于居中的覆盖——lightbox、弹出窗口等。

相关讨论

还有一个我在名单上看不到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}

。

  • 跨浏览器(包括Internet Explorer 8-Internet Explorer 10，无黑客！)
  • 响应百分比和最小/最大值-
  • 居中，不考虑填充(不带框大小！)
  • 必须声明height(见可变高度)
  • 建议设置overflow: auto以防止内容溢出(见溢出)

source:css中的绝对水平和垂直居中

相关讨论

最简单的方法是使用以下3行CSS：

1
2
3
position: relative;
top: 50%;
transform: translateY(-50%);

。

以下是一个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
div.outer-div {
  height: 170px;
  width: 300px;
  background-color: lightgray;
}

div.middle-div {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
1
    Test text

。

相关讨论

实际上，垂直居中需要两个刻度。包含内容的DIV必须具有宽度和高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
1
    Centered div

号

这是结果

相关讨论

现在，对于现代浏览器来说，flexbox解决方案是一种非常简单的方法，因此我建议您这样做：

1
2
3
4
5
6
7
8
9
10
11
.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

。

1
    Div to be aligned vertically

号

相关讨论

这是我找到的最简单的方法，我一直在使用它(这里是jfiddle演示)

感谢CSS Tricks的ChrisCoyier撰写本文。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html, body{
  height: 100%;
  margin: 0;
}
.v-wrap{
    height: 100%;
    white-space: nowrap;
    text-align: center;
}
.v-wrap:before{
    content:"";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    /* adjust for white space between pseudo element and next sibling */
    margin-right: -.25em;
    /* stretch line height */
    height: 100%;
}
.v-box{
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
}

号

1
2
3
4
        <p>
This is how I've been doing it for some time
</p>
    </article>

号

支持从IE8开始。

经过大量的研究，我终于找到了最终的解决办法。它甚至适用于浮动元素。查看源文件

1
2
3
4
5
.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}
相关讨论

要使DIV在页面上居中，请检查fiddle链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#vh {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}
1
Div to be aligned vertically

。

另一种选择是使用flex box，选中fiddle链接。

1
2
3
4
5
6
7
8
9
10
11
.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

号

1
    Div to be aligned vertically

号

另一种选择是使用CSS 3转换：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#vh {
    position: absolute;
    top: 50%;
    left: 50%;
    /*transform: translateX(-50%) translateY(-50%);*/
    transform: translate(-50%, -50%);
}
.box{
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 100px;
    height: 100px;
    background: white;
}

号

1
Div to be aligned vertically

。

相关讨论

flexbox解决方案

笔记1。父元素被赋予类名。2。如果受支持的浏览器需要，请添加flex供应商前缀。

1
2
3
4
.verticallyCenter {
  display: flex;
  align-items: center;
}
1
    Element centered vertically

。

相关讨论

如果有人只关心Internet Explorer 10(及更高版本)，请使用flexbox：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.parent {
    width: 500px;
    height: 500px;
    background: yellow;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;

    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.centered {
    width: 100px;
    height: 100px;
    background: blue;
}

号

1
 

号

flexbox支持：http://canius.com/flexbox

相关讨论

不幸的是——但并不奇怪——解决方案比人们希望的要复杂得多。同样不幸的是，您需要在垂直居中的分区周围使用其他的分区。

对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部DIV设置为显示为表格，将内部DIV设置为显示为表格单元格，然后可以垂直居中。对于Internet Explorer，需要将内部DIV绝对定位在外部DIV中，然后将顶部指定为50%。以下几页将很好地解释这种技术，并提供一些代码示例：

  • CSS中的垂直居中
  • 在具有未知高度的CSS中垂直居中(Internet Explorer 7兼容)(no longer live)
  • 在高度未知的CSS中垂直居中(与Internet Explorer 7兼容)(存档文章由回程机器提供)

还有一种使用JavaScript进行垂直居中的技术。内容与javascript&css的垂直对齐演示了这一点。

最简单的解决方案如下：

1
2
3
4
5
6
7
8
9
.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}

号

1
    Hey there!

号

相关讨论

将元素垂直居中的现代方法是使用flexbox。

你需要一个家长来决定身高，一个孩子来决定中心。

下面的示例将使一个DIV在浏览器中居中。重要的是(在我的例子中)将height: 100%设置为body和html，然后将min-height: 100%设置为容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
1
  I am center.

。

仅垂直居中

如果您不关心InternetExplorer6和7，可以使用包含两个容器的技术。

外容器：

  • 应该有EDOCX1[0]

内容器：

  • 应该有EDOCX1[1]
  • 应该有EDOCX1[2]

内容框：

  • 应该有EDOCX1[3]

您可以将任何您想要的内容添加到内容框，而不必考虑其宽度或高度！

演示：

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

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
1
        Malcolm in the Middle

号

也看这个小提琴！

水平和垂直居中

如果您想水平和垂直居中，还需要以下内容。

内容器：

  • 应该有EDOCX1[4]

内容框：

  • 除非您希望文本居中，否则应将水平文本对齐方式重新调整为例如text-align: left;或text-align: right;。

演示：

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
body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
1
         Malcolm in the Middle

。

也看这个小提琴！

相关讨论

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
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* (x, y)  => position */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */    
}

.vertical {
  position: absolute;
  top: 50%;
  //left: 0;
  transform: translate(0, -50%); /* (x, y) => position */
}

.horizontal {
  position: absolute;
  //top: 0;
  left: 50%;
  transform: translate(-50%, 0); /* (x, y)  => position */
}

div {
  padding: 1em;
  background-color: grey;
  color: white;
}

号

1
2
3
4
5
<body>
  Vertically left
  Horizontal top
  Vertically Horizontal  
</body>

号

相关：将图像居中

当我必须回到这个问题上时，这总是我要去的地方。

对于那些不想跳的人：

  • 指定父容器为position:relative或position:absolute。
  • 在子容器上指定固定高度。
  • 在子容器上设置position:absolute和top:50%以将顶部向下移动到父容器的中间。
  • 设置页边距顶部：-YY，其中YY是子容器高度的一半，用于向上偏移项。

    • 代码中的一个示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <style type="text/css">
        #myoutercontainer {position:relative}
        #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
    </style>
    ...

       
            <p>
    Hey look! I'm vertically centered!
    </p>
            <p>
    How sweet is this?!
    </p>

    我刚刚写了这个CSS，要了解更多信息，请阅读：这篇文章用垂直对齐，任何东西只需要3行CSS。

    1
    2
    3
    4
    5
    .element {
        position: relative;
        top: 50%;
        transform: perspective(1px) translateY(-50%);
    }
    相关讨论

    Billbad的答案只适用于.inner分区的固定宽度。该解决方案通过将属性text-align: center添加到.outerdiv来实现动态宽度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    .outer {
      position: absolute;
      display: table;
      width: 100%;
      height: 100%;
      text-align: center;
    }
    .middle {
      display: table-cell;
      vertical-align: middle;
    }
    .inner {
      text-align: center;
      display: inline-block;
      width: auto;
    }

    号

    1
          Content

    相关讨论

    下面的链接提供了一种简单的方法，只需在CSS中使用3行即可完成此操作：

    垂直对齐任何东西只需3行CSS。

    Credits to: Sebastian Ekstr?m.

    号

    我知道这个问题已经有了答案，但是我在链接中看到了实用程序，因为它很简单。

    使用transform的三行代码实际上适用于现代浏览器和Internet Explorer：

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

    号

    我添加这个答案是因为我在这个答案的前一个版本中发现了一些不完整之处(并且堆栈溢出不允许我简单地进行评论)。

  • 如果当前的DIV在主体中并且没有容器DIV，则"position"相对会破坏样式。但是"fixed"似乎有效，但它显然会修复视区中心的内容。position: relative。

  • 我还使用这种样式使一些覆盖DIV居中，发现在Mozilla中，这个转换的DIV中的所有元素都失去了底部边界。可能是渲染问题。但是，只向其中一些添加最小的填充就可以正确地呈现它。Chrome和Internet Explorer(出人意料地)在不需要填充的情况下呈现了这些框。氧化镁氧化镁

    • 我认为不使用flexbox的所有浏览器的可靠解决方案-"Align items:center；"是display:table和vertical-align:middle；的组合。

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .vertically-center
    {
        display: table;

        width: 100%;  /* optional */
        height: 100%; /* optional */
    }

    .vertically-center > div
    {
        display: table-cell;
        vertical-align: middle;
    }

    HTML

    1
            some text

    。

    ‣；演示：https://jsfiddle.net/6m640rpp/

    特别是对于相对(未知)高度的父级划分，在未知解中居中对我来说很有用。本文中有一些非常好的代码示例。

    它在Chrome、Firefox、Opera和Internet Explorer中进行了测试。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /* This parent can be any width and height */
    .block {
      text-align: center;
    }

    /* The ghost, nudged to maintain perfect centering */
    .block:before {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      margin-right: -0.25em; /* Adjusts for spacing */
    }

    /* The element to be centered, can
       also be of any width and height */
    .centered {
      display: inline-block;
      vertical-align: middle;
      width: 300px;
    }
    1
    2
    3
    4
         Some text
         <p>
    Any other text..."
    </p>

    。

    我这样做了(相应地更改宽度、高度、上边距和左边距)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .wrapper {
        width:960px;
        height:590px;
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-295px;
        margin-left:-480px;
    }

     -- Content --

    。

    相关讨论

    不回答浏览器兼容性，但也提到了新的网格和不那么新的flexbox功能。

    网格

    发件人：Mozilla-网格文档-垂直对齐DIV

    浏览器支持：网格浏览器支持

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .wrapper {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      grid-auto-rows: 200px;
      grid-template-areas:
       ". a a ."
       ". a a .";
    }
    .item1 {
      grid-area: a;
      align-self: center;
      justify-self: center;
    }

    号

    HTML：

    1
     Item 1

    号

    柔性接线盒

    浏览器支持：flexbox浏览器支持

    CSS：

    1
    2
    3
    4
    5
    6
    7
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;

    号

    CSS网格

    1
    2
    3
    4
    5
    6
    7
    body, html { margin: 0; }

    body {
      display: grid;
      min-height: 100vh;
      align-items: center;
    }
    1
    Div to be aligned vertically

    我用这个。它在Internet Explorer 8及更高版本中工作：

    height:268px—对于display:table，作用类似于最小高度。

    CSS：

    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
    * {
      padding: 0;
      margin: 0;
    }
    body {
      background: #cc9999;
    }
    p {
      background: #f0ad4e;
    }
    #all {
      margin: 200px auto;
    }
    .ff-valign-wrap {
      display: table;
      width: 100%;
      height: 268px;
      background: #ff00ff;
    }
    .ff-valign {
      display: table-cell;
      height: 100%;
      vertical-align: middle;
      text-align: center;
      background: #ffff00;
    }

    HTML：

    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
    <body>

     
       
         
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
            <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?
    </p>
         
       
     

    </body>

    号

    我觉得这个最有用……它给出了最精确的"H"布局，并且非常容易理解。

    此标记的好处在于，您可以在单个位置定义内容大小->"pagecontent"。< BR>页面背景的颜色及其水平边距在相应的分隔中定义。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <div id="PageLayoutConfiguration"
         style="display: table;
         position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
         width: 100%; height: 100%;"    >

            <div id="PageBackground"
                 style="display: table-cell; vertical-align: middle;
                 background-color: purple;"    >

                <div id="PageHorizontalMargins"
                     style="width: 100%;
                     background-color: seashell;"    >

                    <div id="PageContent"
                         style="width: 1200px; height: 620px; margin: 0 auto;
                         background-color: grey;"    >

                         my content goes here...

    。

    这里用CSS分隔：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
                         my content goes here...
                   
             
         


    #PageLayoutConfiguration{
       display: table; width: 100%; height: 100%;
       position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
    }

    #PageBackground{
       display: table-cell; vertical-align: middle;
       background-color: purple;
    }

    #PageHorizontalMargins{
       style="width: 100%;
       background-color: seashell;
    }
    #PageContent{
       width: 1200px; height: 620px; margin: 0 auto;
       background-color: grey;
    }

    就这么做：在你的div中添加类：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .modal {
      margin: auto;
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      height: 240px;
    }

    号

    读这篇文章来解释一下。注：Height是必要的。

    我最近发现了一个诀窍：你需要使用top 50%，然后再使用translateY(-50%)。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .outer-div {
      position: relative;
      height: 150px;
      width: 150px;
      background-color: red;
    }

    .centered-div {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      background-color: white;
    }
    1
        Test text

    以下内容在我的案例中有效，并在Firefox中进行了测试。

    1
    2
    3
    4
    5
    6
    7
    #element {
        display: block;
        transform: translateY(50%);
        -moz-transform: translateY(50%);
        -webkit-transform: translateY(50%);
        -ms-transform: translateY(50%);
    }

    DIV的高度和父级的高度是动态的。当同一个父元素上有其他元素高于目标元素时，我使用它，在目标元素中，这两个元素都是水平内联的。

    使用flexbox可以轻松地将内容居中。以下代码显示了需要将内容居中的容器的CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .absolute-center {
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;

        -ms-flex-align: center;
        -webkit-align-items: center;
        -webkit-box-align: center;

        align-items: center;
    }

    号

    如果您有一个块元素(例如)，这个解决方案对我有效。我用这些颜色使溶液更清楚。

    HTML：

    1
    2
    3
    4
    5
    6
    <main class="skin_orange">
    <p>
    As you can the the element/box is vertically centered
    </p>
    Blue Box
    </main>

    号

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    main {
        position: relative;
        width: 400px;
        height: 400px;
    }

    .skin_orange {
        outline: thin dotted red;
        background: orange;
    }

    .bigBox {
        width: 150px;
        height: 150px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .skin_blue {
        background-color: blue;
    }

    号

    JSfiddle代码演示

    我发现了另一种对我有用的方法：

    1
    2
    3
         Welcome
         Aligned Vertically
         Click ME

    。CSS

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

    更多信息

    垂直和水平居中

    HTML

    1
    Centered Dialog

    号

    CSS

    1
    2
    3
    4
    5
    #dialog {
        position:fixed; top:50%; left:50%; z-index:99991;
        width:300px; height:60px;
        margin-top:-150px;  /* half of the width */
        margin-left:-30px; /* half of the height */}

    号

    享受！

    通过使用transform属性，我们可以轻松地执行垂直居中的DIV。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .main-div {
        background: none repeat scroll 0 0 #999;
        font-size: 18px;
        height: 450px;
        max-width: 850px;
        padding: 15px;
    }

    .vertical-center {
        background: none repeat scroll 0 0 #1FA67A;
        color: #FFFFFF;
        padding: 15px;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
    }

    号

    1
            <span>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</span>

    号

    完整文章见这里

    最好的办法是：

    1
    2
    3
    4
    5
    6
    #vertalign{
      height: 300px;
      width: 300px;
      position: absolute;
      top: calc(50vh - 150px);
    }

    。

    150像素，因为在本例中这是DIV高度的一半。

    声明此混音：

    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();
    }
    相关讨论

    这是迄今为止最简单的方法，也适用于非阻塞元素，唯一的缺点是，它是flexbox，因此，旧的浏览器将不支持这种方法。

    1
        <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />

    。

    链接到代码笔：

    网址：http://codepen.io/damianocel/pen/lnodrp

    这里重要的一点是，对于垂直居中，我们需要定义一个父元素(容器)，并且img的高度必须小于父元素。

    相关讨论

    此方法不使用任何转换。所以它不会有输出变得模糊的问题。

    1
    2
    3
    4
    5
    position: absolute;
    width: 100vw;
    top: 25%;
    bottom: 25%;
    text-align: center;

    要垂直对齐网页中的框，包括Internet Explorer 6，您可以使用：

  • 条件注释
  • haslayout房地产
  • 其他(现在是flex)的display: table-value

    • 小提琴

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* Internet Explorer 8 and others */
    .main {
      width: 500px;
      margin: auto;
      border: solid;
    }
    html {
      height: 100%;
      width: 100%;
      display: table;
    }
    body {
      display: table-cell;
      vertical-align: middle;
    }

    号

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <!-- [if lte IE 7]>
    <style> /* Should be in the <head> */
        html, body , .ie {
            height: 100%;
            text-align: center;
            white-space: nowrap;
        }
        .ie , .main{
            display: inline; /* Used with zoom in case you take a block element instead an inline element */
            zoom: 1;
            vertical-align: middle;
            text-align: left;
            white-space: normal;
        }
    </style>
    <b class="ie">
    <!--[endif]-->

      <p>
    Fill it up with your content
    </p>
      <p>
    JsFiddle versie
    </p>

    号

    实际上，Internet Explorer 7在这里会带来一些麻烦，因为它是唯一一个在HTML/Body元素上严格应用height: 100%的浏览器。

    但是，这已经是过去和现在了，他们仍然介意旧版本的Internet Explorer，table/table-cell还不错，display: flex很有前途，display: grid有朝一日会出现。

    相关讨论

    这里有一个简单的方法，几乎没有代码：

    CSS代码：

    1
    2
    3
    4
    5
    6
    7
    8
    .main{
        height: 100%;
    }

    .center{
        top: 50%;
        margin-top: 50%;
    }

    号

    HTML代码：

    1
            Hi, I am centered!

    号

    您的文本将在页面中间！

    这在我的案例中有效(仅在现代浏览器中测试)：

    1
    2
    3
    4
    .textthatneedstobecentered {
      margin: auto;
      top: 0; bottom: 0;
    }

    。