Flexbox解决方案

Question

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

<body>
    <div>Div to be aligned vertically</div>
</body>

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

Answer 1

以下是我可以构建的最佳全方位解决方案，可以垂直和水平居中固定宽度，灵活高度内容框。它已经过测试，适用于最新版本的Firefox，Opera，Chrome和Safari。

.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*/
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

View A Working Example With Dynamic Content

我内置了一些动态内容来测试灵活性，并且很想知道是否有人发现任何问题。它也适用于中心叠加层 - 灯箱，弹出窗口等

Answer 2

我在名单上看不到一个：

.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（请参阅Variable Height）
推荐设置overflow: auto以防止内容溢出（请参阅溢出）

_{来源：Absolute Horizontal And Vertical Centering In CSS}

Answer 3

最简单的方法是CSS的 3行：

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

以下是一个例子：

＆＃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%);
}

＆＃13;

<div class='outer-div'>
  <div class='middle-div'>
    Test text
  </div>
</div>

＆＃13;

Answer 4

实际上你需要两个div用于垂直居中。包含内容的div必须具有宽度和高度。

#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;
}

<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

以下是result

Answer 5

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

＆＃13;

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background:green;
}

body, html{
  height:100%;
}

＆＃13;

<div class="container">
    <div>Div to be aligned vertically</div>
</div>

＆＃13;

Answer 6

这是我发现的最简单的方法，我一直都在使用它（jsFiddle demo here）

感谢来自CSS Tricks的Chris Coyier this article。

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;
}

<div class="v-wrap">
    <article class="v-box">
        <p>This is how I've been doing it for some time</p>
    </article>
</div>

支持从IE8开始。

Answer 7

经过大量的研究，我终于找到了最终的解决方案。它甚至适用于浮动元素。 View Source

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Answer 8

将div置于页面中心check the fiddle link。

#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;
}

<div id="vh" class="box">Div to be aligned vertically</div>

另一种选择是使用弹性框check the fiddle link。

.vh {
    background-color: #ddd;
    height: 400px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

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

#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;
}

<div id="vh" class="box">Div to be aligned vertically</div>

Answer 9

Flexbox解决方案

备注
1.父元素被赋予类名 2.如果supported browsers需要，请添加Flex供应商前缀。

＆＃13;
＆＃13;
.verticallyCenter { display: flex; align-items: center; }
＆＃13;
<div class="verticallyCenter" style="height:200px; background:beige"> <div>Element centered vertically</div> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 10

不幸的是 - 但并不奇怪 - 解决方案比人们希望的更复杂。还不幸的是，你需要在想要垂直居中的div周围使用额外的div。

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

Vertical Centering in CSS
~~Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)~~ （不再生活）
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible)（存档文章由Wayback Machine提供）

还有一种使用JavaScript进行垂直居中的技术。 Vertical alignment of content with JavaScript & CSS演示了它。

Answer 11

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

.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;
}

<div class="parent">
    <div class="centered"></div>
</div>

Flexbox支持：http://caniuse.com/flexbox

Answer 12

最简单的解决方案如下：

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
}
.inner-div{
  margin: auto;
  text-align:center;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Answer 13

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

您需要父母来决定身高和孩子要居中。

以下示例将div放在浏览器中心的中心。重要的是（在我的示例中）将height: 100%设置为body，html然后min-height: 100%设置为容器。

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;
}

<div id='center_container'>
  <div id='center'>I am center.</div>
</div>

Answer 14

仅垂直居中

如果您不关心Internet Explorer 6和7，则可以使用涉及两个容器的技术。

外部容器：

应该有display: table;

内部容器：

应该有display: table-cell;
应该有vertical-align: middle;

内容框：

应该有display: inline-block;

您可以将任何内容添加到内容框中，而无需考虑其宽度或高度！

的演示：

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; }

<div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Malcolm in the Middle </div> </div> </div>

另见this Fiddle！

水平和垂直居中

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

内部容器：

应该有text-align: center;

内容框：

应重新调整水平文字对齐方式，例如text-align: left;或text-align: right;，除非您希望文字居中

的演示：

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; }

<div class="outer-container"> <div class="inner-container"> <div class="centered-content"> Malcolm in the Middle </div> </div> </div>

另见this Fiddle！

Answer 15

.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;
}

<body>
  <div class="vertical">Vertically left</div>
  <div class="horizontal">Horizontal top</div>
  <div class="center">Vertically Horizontal</div>  
</body>

CSS

.vertically-center
{
    display: table;

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

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

HTML

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo：https://jsfiddle.net/6m640rpp/

Answer 21

使用CSS的flex属性。

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

或使用display: flex;和margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

显示文字中心

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

使用高度和宽度的百分比（％）。

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

Answer 22

使用transform的三行代码几乎适用于现代浏览器和Internet Explorer：

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

我正在添加这个答案，因为我在此答案的前一版本中发现了一些不完整性（Stack Overflow不允许我简单地评论）。

'position'相对会影响样式，如果当前div在体内并且没有容器div。然而，“固定”似乎有效，但它显然将内容固定在视口的中心
此外，我使用这种样式来对齐一些叠加div，并发现在Mozilla中，这个转换后的div中的所有元素都失去了底部边框。可能是一个渲染问题。但是只添加一些最小的填充就可以正确地渲染它。 Chrome和Internet Explorer（令人惊讶地）渲染了这些框而不需要填充

Answer 23

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

<强>网格

来自：Mozilla - Grid Documentation - Align Div Vertically

浏览器支持：Grid Browser Support

CSS：

.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：

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

<强> Flexbox的

浏览器支持：Flexbox Browser Support

CSS：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Answer 24

CSS网格

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

Answer 25

对于新来者，请尝试

display: flex;
align-items: center;
justify-content: center;

Answer 26

.center{
    display: grid;
    place-items: center;
}

Answer 27

特别是对于具有相对（未知）高度的父div，centering in the unknown解决方案对我来说非常有用。文章中有一些非常好的代码示例。

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

/* 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;
}

<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

Answer 28

我这样做了（相应地改变宽度，高度，边距顶部和边距）：

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Answer 29

我最近发现了一个窍门：您需要使用top 50%然后执行translateY(-50%)

.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;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Answer 30

以下是我的案例，并在Firefox中进行了测试。

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

div的身高和父亲的身高都是动态的。当同一个父元素上的其他元素高于目标元素时，我会使用它，两个元素都是水平内嵌的。

Answer 31

只需这样做：在div添加课程：

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

阅读this article以获得解释。注意：Height是必要的。

Answer 32

我用这个。它适用于Internet Explorer 8及更高版本：

height:268px - display:table就像min-height一样。

CSS：

* {
  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：

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <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>
      </div>
    </div>
  </div>

</body>

Answer 33

我发现这个最有用..它提供了最准确的“H”布局，并且非常易于理解。

此标记的好处是您可以在一个地方定义内容大小 - ＆gt; “PageContent”。
页面背景的颜色及其水平边距在相应的div中定义。

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

                </div>
            </div>
        </div>
    </div>

这里有CSS分隔：

<div id="PageLayoutConfiguration">
     <div id="PageBackground">
          <div id="PageHorizontalMargins">
               <div id="PageContent">
                     my content goes here...
               </div>
          </div>
     </div>
</div>

#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;
}

Answer 34

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

.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;
}

Answer 35

如果你有一个块元素（例如），这个解决方案对我有用。我使用颜色使解决方案更清晰。

<强> HTML：

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

<强> CSS：

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 Code Demo

Answer 36

由于每次我需要将div垂直居中时，我都会一遍又一遍地用谷歌搜索它，并且总是总是首先回答这个问题，我会留给以后的我使用（因为所提供的解决方案都无法很好地满足我的需要）：

因此，如果已经在使用引导程序，则可以按照以下步骤进行操作：

<div style="min-height: 100vh;" class="align-items-center row">
    <div class="col" style="margin: auto; max-width: 750px;"> //optional style to center horizontally as well

    //content goes here

    </div>
</div>

Answer 37

可以通过两种方式实现

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

或

使用弹性

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

align-items:center; 使内容垂直居中

justify-content: center;使内容水平居中

Answer 38

我为想要的人分享了简短版本。

.firstDivision {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.firstDivision .verticalCenter {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

<div class="firstDivision">
  <div class="verticalCenter">
    Text was centered for Vertical.
  </div>
</div>

Answer 39

此方法不使用任何变换。因此，输出变得模糊不会有问题。

position: absolute;
width: 100vw;
top: 25%;
bottom: 25%;
text-align: center;

Answer 40

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

<div class="sweet-overlay">
    <img class="centered" src="http://jimpunk.com/Loading/loading83.gif" />
</div>

链接到codepen：

http://codepen.io/damianocel/pen/LNOdRp

重要的一点是，对于垂直居中，我们需要定义一个父元素（容器），img的高度必须小于父元素。

Answer 41

声明这个Mixin：

@mixin vertical-align($position: relative) {
  position: $position;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

然后将其包含在您的元素中：

.element{
    @include vertical-align();
}

Answer 42

最好的办法是：

#vertalign{
  height: 300px;
  width: 300px;
  position: absolute;
  top: calc(50vh - 150px); 
}

150像素，因为在这种情况下，这是div高度的一半。

Answer 43

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

.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%);
}

<div class="main-div">
    <div class="vertical-center">
        <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>
    </div>
</div>

See here for full article

Answer 44

垂直＆amp;水平 CENTER

HTML

<div id="dialog">Centered Dialog</div>

CSS

#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 */}

享受！

Answer 45

我刚刚找到另一种对我有用的方法：

<div class="container">
  <div class="vertical">
     <h1>Welcome</h1>
     <h2>Aligned Vertically</h2>
     <a href="#">Click ME</a>
   </div>
</div>

CSS

.vertical{
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

More information

Answer 46

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

有条件的评论
haslayout属性
display: table-value为其他人（现在是flex）

Fiddle

/* 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;
}

<!-- [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"></b>
<!--[endif]-->
<div class="main">
  <p>Fill it up with your content </p>
  <p><a href="https://jsfiddle.net/h8z24s5v/embedded/result/">JsFiddle versie</a></p>
</div>

实际上，Internet Explorer 7会带来一些麻烦，这是唯一会严格应用height: 100%的HTML / body元素。

但是，这已经过去了，现在仍然关注旧版本的Internet Explorer，table/table-cell很好，display: flex很有希望，display: grid会有一天出现。

Answer 47

这是一种简单的方法，几乎没有代码：

CSS代码：

.main{
    height: 100%;
}

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

HTML code：

<div class="main">
    <div class="center">
        Hi, I am centered!
    </div>
</div>

您的文字将位于页面中间！

Answer 48

这适用于我的情况（仅在现代浏览器中测试过）：

.textthatneedstobecentered {
  margin: auto;
  top: 0; bottom: 0;
}

如何为所有浏览器垂直居中div？

48 个答案:

Flexbox解决方案

仅垂直居中

外部容器：

内部容器：

内容框：

的演示：

水平和垂直居中

内部容器：

内容框：

的演示：

CSS

HTML

CSS网格

CSS