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

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

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


当前回答

要垂直对齐网页(包括Internet Explorer 6)中的框,可以使用:

有条件的评论haslayout属性显示:其他表值(现在为flex)

不停摆弄

/*Internet Explorer 8和其他*/.主要{宽度:500px;边距:自动;边框:实心;}html格式{高度:100%;宽度:100%;显示:表格;}正文{显示:表格单元格;垂直对齐:中间;}<!-- [如果lte IE 7]><style>/*应该在<head>中*/html,正文,.ie{高度:100%;文本对齐:居中;空白:nowrap;}例如,.main{显示:内联;/*在使用块元素而不是内联元素时与缩放一起使用*/缩放:1;垂直对齐:中间;文本对齐:左侧;空白:正常;}</style><b class=“ie”></b><!--[endif]--><div class=“main”><p>用你的内容填满它</p><p><a href=“https://jsfiddle.net/h8z24s5v/embedded/result/“>JsFiddle版本</a></p></div>

实际上,InternetExplorer7在这里会带来一些麻烦,因为它是唯一严格应用高度的浏览器:100%应用于HTML/body元素。


但是,这是过去和现在的事了,谁还记得旧版本的Internet Explorer,表/表单元格很好,display:flex很有前途,display:grid总有一天会出现。


现在通过flex的另一个示例

html格式{显示:柔性;最小高度:100vh;/*或高度*/}正文{边距:自动;}<div>div垂直对齐</div>

其他回答

下面是我可以构建的最好的全方位解决方案,以垂直和水平居中固定宽度、灵活高度的内容框。它已在Firefox、Opera、Chrome和Safari的最新版本中测试并运行。

.外部{显示:表格;位置:绝对;顶部:0;左:0;高度:100%;宽度:100%;}.中间{显示:表格单元格;垂直对齐:中间;}.内部{左边距:自动;右边距:自动;宽度:400px;/*你想要什么宽度*/}<div class=“outer”><div class=“middle”><div class=“inner”><h1>内容</h1><p>从前,一个沉闷的午夜</p></div></div></div>

查看动态内容的工作示例

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

我觉得这个最有用。。。它给出了最准确的“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{
   width: 100%;
   background-color: seashell;
}
#PageContent{
   width: 1200px;
   height: 620px;
   margin: 0 auto;
   background-color: grey;
}

不回答浏览器兼容性,但也要提到新的网格和不那么新的Flexbox功能。

Grid

来自:Mozilla-网格文档-垂直对齐Div

浏览器支持:网格浏览器支持

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

CSS:

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

现在,Flexbox解决方案是现代浏览器的一种非常简单的方式,因此我向您推荐:

.容器{显示:柔性;对齐项目:居中;对齐内容:中心;高度:100%;背景:绿色;}身体html格式{高度:100%;}<div class=“container”><div>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;
}

跨浏览器(包括Internet Explorer 8-Internet Explorer 10,无黑客攻击!)响应百分比和最小值/最大值-居中,不考虑填充(不考虑框大小!)必须声明高度(请参见可变高度)建议设置溢出:自动防止内容溢出(请参阅溢出)

来源:CSS中的绝对水平和垂直居中