提问



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


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


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

最佳参考


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




.outer {
  display: table;
  position: absolute;
  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>



我还不能在名单上看到:


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



  • 跨浏览器(包括互联网 资源管理器  8 - Internet  Explorer  10没有黑客!)

  • 响应百分比和最小/最大 -

  • 以填充为中心(没有框大小!)

  • 必须声明
  • height(参见变量高度)

  • 推荐设置overflow: auto以防止内容溢出(请参阅溢出)



来源:CSS中的绝对水平和垂直居中 [76] [77]

其它参考1


最简单的方法是CSS的以下 3行:


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


以下是一个例子:




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

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



实际上你需要两个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>



这是我找到的最简单的方法,我一直都在使用它
(这里是jsFiddle演示)[78]


感谢CSS Tricks的Chris Coyier撰写本文。[79]




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



经过大量的研究,我终于找到了最终的解决方案。它甚至适用于浮动元素。查看来源[80]


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

其它参考2


要将div放在页面中心,请检查小提琴链接。[81]




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



现在,flexbox解决方案对于现代浏览器来说是一种非常简单的方式,因此我建议您使用:




.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

body, html{
  height:100%;
}

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



Flexbox解决方案



备注结果
1.父元素被赋予类名。

2.如果您的支持的浏览器需要,请添加flex供应商前缀。[82]




.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>



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


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



  • CSS中的垂直居中

  • CSS中具有未知高度的垂直居中(Internet 资源管理器  7兼容)(不再生效)

  • CSS中具有未知高度的垂直居中(Internet  Explorer兼容7)(存档文章由Wayback Machine提供)



还有一种使用JavaScript进行垂直居中的技术。使用JavaScript和& ;; CSS演示了它。[83] [84] [85] [86]

其它参考3


如果有人只关心互联网  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[87]


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


下面的示例将div放在浏览器中心的中心。重要的(在我的例子中)是将height: 100%设置为bodyhtml然后将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>





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



仅垂直居中



如果您不关心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>



当我不得不回到这个问题时,这总是我要去的地方。[88]


对于那些不想跳跃的人:



  1. 将父容器指定为position:relativeposition:absolute

  2. 在子容器上指定固定高度。

  3. 在子容器上设置position:absolutetop:50%,将顶部向下移动到父容器的中间位置。

  4. 设置margin-top:-yy,其中yy是子容器高度的一半,以向上偏移项目。



代码中的一个例子:


<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

其它参考4


最简单的解决方案如下:




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



我刚刚写了这篇CSS并了解更多信息,请通过:本文垂直对齐任何只有3行CSS。[89]


.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

其它参考5


以下链接提供了一种简单的方法,只需在CSS中使用3行:


用3行CSS垂直对齐任何东西。[90]



  致信:SebastianEkström。



我知道这个问题已经有了答案但是我在链接中看到了它的简洁性。

其它参考6


Billbad的答案只适用于.inner div的固定宽度。
通过将属性text-align: center添加到.outer div,此解决方案适用于动态宽度。




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

<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>



我知道已经给出了答案,但我认为在所有情况下,链接对于中心对齐非常有用:howtocenterincss.com [91]

其它参考7


使用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不允许我简单地评论)。



    如果当前div在体内并且没有容器div,则
  1. position相对会弄乱样式。但是固定似乎有效,但它显然将内容固定在视口的中心


  2. 此外,我使用这种样式来对齐一些叠加div,并发现在Mozilla中,这个转换后的div中的所有元素都失去了底部边框。可能是一个渲染问题。但是只为其中一些添加最小填充正确地渲染它。 Chrome和互联网资源管理器(令人惊讶地)渲染了这些框而不需要填充




其它参考8


我这样做了(相应地改变宽度,高度,margin-top和margin-left):


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

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

其它参考9


没有回答浏览器的兼容性,但也提到了新的Grid和不那么新的Flexbox功能。





来自:Mozilla - 网格文档 - 垂直对齐[92]


浏览器支持:网格浏览器支持[93]


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浏览器支持[94]


CSS:


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

其它参考10


特别是对于具有相对(未知)高度的父div,未知解决方案的中心对我来说非常有用。文章中有一些非常好的代码示例。[95]


它在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>



我认为在不使用flexbox的情况下为所有浏览器提供可靠的解决方案 - align-items:center;是display:table和vertical-align:middle;的组合。


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/[96]

其它参考11


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


此标记的好处是您可以在一个地方定义内容大小 - >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;
}

其它参考12


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

其它参考13


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


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代码演示[97]

其它参考14


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


height:268px - display:table的作用就像最小高度。


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>

其它参考15


就这么做:在div添加课程:


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


并阅读这篇文章的解释。注意:Height是必要的。[98]