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

最新推荐文章于 2021-06-15 21:21:13 发布

asdfgh0077

最新推荐文章于 2021-06-15 21:21:13 发布

阅读量400

点赞数

文章标签： css cross-browser alignment vertical-alignment centering

原文链接：https://stackoom.com/question/1f3R/如何将所有浏览器的div垂直居中

版权

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

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

如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置div ？

#1楼

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

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

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

#2楼

我发现这是最有用的..它提供了最准确的“ 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;
}

#3楼

我在清单上看不到的另一个：

.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以防止内容溢出（请参见溢出）

_{来源： CSS中的绝对水平和垂直居中}

#4楼

要将div置于页面中心，请选中小提琴链接。

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

另一个选择是使用flex框，检查小提琴链接。

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

#5楼

这是我找到的最简单的方法，我一直都在使用它（ jsFiddle演示）

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

 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。

#6楼

如果有人只关心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

#7楼

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>

#8楼

将元素垂直居中的一种现代方法是使用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>

#9楼

特别是对于具有相对（未知）高度的父级div，在未知解决方案中居中对我很有用。本文中有一些非常不错的代码示例。

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

#10楼

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

1）职位：相对；

2）最高：50％；

3）转换：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>

#11楼

只需做：在您的div添加类：

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

并阅读本文以获得解释。注意： Height是必需的。

#12楼

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

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

#13楼

使用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，则“ position”相对会弄乱样式。但是，“固定”似乎可行，但显然可以将内容固定在视口中心
另外，我使用了这种样式来使某些叠加层div居中，并发现在Mozilla中，此变换后的div中的所有元素都失去了底部边框。可能是渲染问题。但是，仅向其中一些添加最小填充即可正确呈现它。 Chrome和Internet Explorer（令人惊讶地）无需填充就可以显示这些框

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

另请参阅此小提琴 ！

水平和垂直居中

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

内部容器：

应该具有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>

另请参阅此小提琴 ！

#15楼

Flexbox解决方案

笔记
1.给父元素一个类名。
2.如果支持的浏览器需要，请添加弹性厂商前缀。

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

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

#16楼

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

这是结果

#17楼

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

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

CSS的垂直居中
~~高度未知的CSS中的垂直居中（兼容Internet Explorer 7）~~ （不再可用）
高度未知的CSS中的垂直居中（兼容Internet Explorer 7）（存档文章由Wayback Machine提供）

还有一种使用JavaScript进行垂直居中的技术。内容与JavaScript和CSS的垂直对齐说明了这一点。

#18楼

我只是编写了此CSS，并且要了解更多信息，请仔细阅读：本文仅用3行CSS垂直对齐任何内容。

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

#19楼

现在，对于现代浏览器来说，flexbox解决方案是一种非常简单的方法，因此我为您推荐：

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

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

#20楼

以下链接提供了一种简单的方法，只需在CSS中执行3行即可：

用3行CSS垂直对齐任何内容。

图片来源 ： SebastianEkström 。

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

#21楼

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

#22楼

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

#23楼

没有回答浏览器的兼容性问题，还提到了新的Grid和不是那么新的Flexbox功能。

格网

来自： 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;

#24楼

我认为无需使用flexbox即可为所有浏览器提供可靠的解决方案-“ align-items：center;” 是显示：表格和垂直对齐：中间；的组合。

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

演示： https ：//jsfiddle.net/6m640rpp/

#25楼

最简单的解决方案如下：

 .outer-div{ width: 100%; height: 200px; display: flex; border:1px solid #000; } .inner-div{ margin: auto; text-align:center; border:1px solid red; }

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

#26楼

CSS网格

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

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

#27楼

我最近发现了一个窍门：您需要使用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>

#28楼

对于新来者，请尝试

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

#29楼

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

#30楼

下面是我可以构建的最好的全方位解决方案，以使固定宽度， 高度灵活的内容框垂直和水平居中。它已经过测试，可用于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>

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

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

#31楼

当我不得不回到这个问题上时，这永远是我去的地方。

对于那些不想跳的人：

将父容器指定为position:relative或position:absolute 。
在子容器上指定固定高度。
在子容器上设置position:absolute和top:50% ，以将顶部向下移动到父容器的中间。
设置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>

asdfgh0077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫