如何为所有使用CSS的浏览器垂直居中放置“div”元素？
我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少Internet Explorer 6支持如何为所有使用CSS的浏览器垂直居中放置“div”元素？,css,cross-browser,alignment,vertical-alignment,centering,Css,Cross Browser,Alignment,Vertical Alignment,Centering,我想用CSS垂直居中一个div。我不想要表格或JavaScript，只想要纯CSS。我找到了一些解决方案，但它们都缺少Internet Explorer 6支持 <body> <div>Div to be aligned vertically</div> </body> 如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置一个div？实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度 容器{
<body>
<div>Div to be aligned vertically</div>
</body>
如何在所有主要浏览器（包括Internet Explorer 6）中垂直居中放置一个div？实际上，垂直居中需要两个div。包含内容的div必须具有宽度和高度 容器{ 位置：绝对位置； 最高：50%； 利润上限：-200px； /*内容高度的一半*/ 左：0； 宽度：100%； } 内容{ 宽度：624px； 左边距：自动； 右边距：自动； 身高：395px； 边框：1px实心000000； } 居中div
不幸的是——但并不奇怪——解决方案比人们希望的要复杂得多。同样不幸的是，您需要在想要垂直居中的div周围使用额外的div 对于符合标准的浏览器，如Mozilla、Opera、Safari等，您需要将外部div设置为显示为表格，将内部div设置为显示为表格单元格，然后将其垂直居中。对于Internet Explorer，您需要将内部div绝对定位在外部div内，然后将顶部指定为50%。以下几页很好地解释了这项技术，并提供了一些代码示例： 回程机提供的存档文章
还有一种使用JavaScript进行垂直居中的技术。演示它。下面是我所能构建的最好的全方位解决方案，它可以使固定宽度、灵活高度的内容框垂直和水平居中。它在最新版本的Firefox、Opera、Chrome和Safari上进行了测试和工作 .外部{ 显示：表格； 位置：绝对位置； 排名：0； 左：0； 身高：100%； 宽度：100%； } .中{ 显示：表格单元格； 垂直对齐：中间对齐； } .内部{ 左边距：自动； 右边距：自动； 宽度：400px； /*你想要什么宽度都行*/ } 内容 从前，一个沉闷的午夜
当我必须回来的时候，我总是去这里 对于那些不想跳的人： 将父容器指定为位置：相对或位置：绝对。 在子容器上指定固定高度。 在子容器上设置位置：绝对和顶部：50%，以将顶部向下移动到父容器的中间。 设置边距顶部：-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>
我这样做是因为宽度、高度、页边顶部和页边左侧都有相应的变化： .包装纸{ 宽度：960px； 高度：590px； 位置：绝对位置； 最高：50%； 左：50%； 利润上限：-295px； 左边距：-480px； } -内容-
还有一件我在清单上看不到的事：
.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;
}
来源：要使div在页面上居中 vh{ 保证金：自动； 位置：绝对位置； 排名：0； 左：0； 底部：0； 右：0； } .盒子{ 边界半径：15px； 盒影：0.08像素rgba0,0,0,0.4； 填充：25px； 宽度：100px； 高度：100px； 背景：白色； }
垂直对齐的Div编辑2020：仅当您需要支持旧浏览器时才使用此选项，您应该拒绝这样做如果有人只关心Internet Explorer 10及更高版本，请使用： .家长{ 宽度：500px； 高度：500px； 背景：黄色； 显示：-webkit flex； 显示：-ms flexbox； 显示器：flex； -webkit内容：中心； -ms-flex-pack:center； 证明内容：中心； -webkit对齐项目：居中； -ms-flex-align：居中； 对齐项目：居中； } .居中{ 宽度：100px； 高度：100px； 背景：蓝色； }
Billbad的答案仅适用于固定宽度的.inner div。 此解决方案通过将属性text align:center添加到.outer div来实现动态宽度 .外部{ 位置：绝对位置； 显示：表格； 宽度：100%； 身高：100%； 文本对齐：居中； } .中{ 显示：表格单元格； 垂直对齐：中间对齐； } .内部{ 文本对齐：居中； 显示：内联块； 宽度：自动； } 所容纳之物
将元素垂直居中的现代方法是使用 你需要一个家长来决定身高，一个孩子来决定居中 下面的示例将div置于浏览器的中心。在我的示例中，重要的是将height:100%设置为body和html，然后将minheight:100%设置为容器 正文，html{ 背景：F5； 框大小：边框框； 身高：100%； 保证金：0； } 中央集装箱{ 对齐项目：居中； 迪普拉 y:flex； 最小高度：100%； } 居中{ 背景：白色； 保证金：0自动； 填充：10px； 文本对齐：居中； 宽度：200px； } 我是中锋。
特别是对于高度相对未知的父div，这个解决方案对我来说非常有效。本文中有一些非常好的代码示例 它在Chrome、Firefox、Opera和InternetExplorer中进行了测试 /*此父级可以是任意宽度和高度*/ .街区{ 文本对齐：居中； } /*鬼魂，用肘轻推以保持完美的居中*/ .布洛克：以前{ 内容：； 显示：内联块； 身高：100%； 垂直对齐：中间对齐； 右边距：-0.25em；/*调整间距*/ } /*要居中的元素可以 也可以具有任何宽度和高度*/ .居中{ 显示：内联块； 垂直对齐：中间对齐； 宽度：300px； } 一些文本 任何其他文本
最简单的方法是使用以下三行CSS： 1位置：相对位置 前2名：50% 3转化：translateY-50% 以下是一个例子： 外分区{ 高度：170px； 宽度：300px； 背景颜色：浅灰色； } 中段{ 位置：相对位置； 最高：50%； -webkit转换：translateY-50%； -ms转换：translateY-50%； 转化：translateY-50%； } 测试文本
只需这样做：在您的div中添加类：
并阅读解释。注：高度是必要的。经过大量研究，我终于找到了最终的解决方案。它甚至适用于浮动元素
使用transform的三行代码实际上适用于现代浏览器和InternetExplorer：
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
这是垂直居中的我刚刚写了这个CSS，要了解更多信息，请通过： 现在，该解决方案对于现代浏览器来说是一种非常简单的方法，因此我建议您： .集装箱{ 显示器：flex； 对齐项目：居中； 证明内容：中心； 身高：100%； 背景：绿色； } 身体 html{ 身高：100%； } 要垂直对齐的Div
通过使用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;
}
不回答浏览器兼容性，但也提到了新的网格和不太新的Flexbox功能 网格 发件人： 浏览器支持： CSS: HTML:
我认为一个不使用Flexbox-align项的所有浏览器的可靠解决方案是：居中；是显示：表格和垂直对齐：中间；的组合 CSS HTML
演示：最简单的解决方案如下： .外分区{ 宽度：100%； 高度：200px； 显示器：flex； 边框：1px000； } .内分区{ 保证金：自动； 文本对齐：居中； 边框：1px纯红； } 嘿！ CSS网格 正文，html{margin:0；} 身体{ 显示：网格； 最小高度：100vh； 对齐项目：居中； }
Div要垂直对齐我最近发现了一个技巧：你需要使用top 50%，然后做translateY-50% .外分区{ 位置：相对位置； 高度：150像素； 宽度：150px； 背景色：红色； } .中心分区{ 位置：绝对位置； 最高：50%； -webkit转换：translateY-50%； -ms转换：translateY-50%； 转化：translateY-50%； 背景色：白色； } 测试文本
对于新来者，请尝试：
display: flex;
align-items: center;
justify-content: center;
@MarcoDemaio人们不是经常不喜欢这里的布局表吗？@Chud37：这取决于你必须做什么，布局表通常不是通用的，输入代码也不长，有了css，你可以很容易地将2 cols布局更改为3/4/5 sols布局等。但在这种情况下是不同的，使用几十个css提示和技巧完成这样一个简单的任务，可以通过一个完美的跨浏览器表来完成，这就像试图通过窗户而不是门进入你的房子。如果人们不关心旧的浏览器支持：有一些解决方案与浏览器兼容信息这里有很多方法可以做到这一点，只有当你知道你试图居中的DIV的宽度/高度时才是好的。这不是问题所在这是个老把戏。。。top 50%和top margin为内部div高度的负一半假设div的高度是固定的。如果div可以更改高度，则不要工作。Android<4.4不支持对齐项：居中！实际上，它支持对齐项目：居中@t、 mikael.d你可能想仔细看看那张桌子。对于Android<4.4，它声明只支持旧的flexbox规范，不支持包装。@ArmelLarcier这是不正确的。相对单位为百分比、ems和rems。绝对值或固定值是像素或点。你指的是它只在声明的高度下工作。然而，尽管Moes描述的这种方法确实需要一个高度，但当您以相对单位声明它时，百分比是最好的，无论有多少内容在居中DIV内，DIV都会垂直扩展以适应其内容。这就是这种方法的优点。另一个好处是，这种方法在IE8/9/10中有效，以防有人仍然需要支持这些浏览器。@ricardozea我不是故意装傻，但说居中的div将垂直扩展，而保持垂直居中是错误的。试试看。我知道当我说高度必须固定时，这不是正确的词。它确实是相对于它的父母的。无论如何，我认为Chris Coyer的方法更有意义，请参阅我的答案stackoverflow.com/a/21919578/1491212它与IE8兼容，并且在没有指定维度的元素上工作。@ArmelLarcier一切正常。他没有错，兄弟。试试：-在绿色框中添加段落；]。诚然，它使用现代化来实现效果，但总的来说是可行的。我看到了你的答案和CSS-Tricks.com的帖子，但是这个方法并没有让我高兴，它使用了额外的标记，而且CSS太冗长了。我认为最好的解决方案是使用flexbox或转换：translate-50%，-50%；技巧对于IE8，我只是让它保持顶部/中心对齐，然后继续。@ricardozea您链接到的代码笔使用了display:table方法和额外的标记，所以我并不感到惊讶。无论如何，+1到最后一句。如果您记住容器元素必须有一个隐式或显式的高度，那么这确实非常有效；对于那些对CSS比较陌生的人来说，这是一个小问题。在所有答案中，这是最简单的！我希望其他人也能看到你的答案！非常感谢。顺便说一句，50%为我工作，而不是-50%真是难以置信。经过几个小时的搜索，这个对我很有用。我必须使用translateY50%我知道为什么，但它奏效了。在我的例子中，父元素是由AEM Forms Engine创建的，我只能控制某些子元素。注意：如果外部div的高度设置为最小高度，则无法正确工作：当外部div的高度为100%时，170px会干扰z-indexdoesn无法工作。然后仅适用于position:absolute；。我首先在其他地方找到了这个解决方案，但是对于这个特别的答案，我特别提到了-webkit转换变量，这是我在phantomjs中使用这个方法所需要的。。。结束了几个小时的挣扎，谢谢你！这是最好的答案。这是难以置信的简单，用最少的现有工作和功能的一切，早在IE9，甚至没有人使用了。让我们给这家伙弄点东西
更多的选票！有趣的我使用的是几乎相同的技术！->当数学结果为分数像素时，CSS变换可能会导致文本和边框扭曲。注意：调整内容：如果有导航栏，中心也会水平居中，你可以使用height:calc100%-55px或任何导航栏的高度来调整高度。我还必须使用float删除车身的边距/填充。谢谢。请注意，在较新较旧的mobile safari浏览器上，这可能会表现得很奇怪。推荐的使用方法，而不是高度是灵活的基础上。容器类。这一个为我工作-谢谢！确实是最简单的一个：虽然，我必须将样式设置为外部div，而不是body。请添加一个示例，显示CSS代码如何垂直对齐div。这太内部了。我遇到了关于对齐项目和对齐内容的精彩解释。必读：拒绝支持旧浏览器，我的解决方案不是flexbox，而是网格系统。对我来说，将内容放在一个容器中有点烦人，当它的高度变得太小时，需要显示滚动条，而居中的内容用所有其他方法将滚动区域松开。在我刚刚使用的容器中：{display:grid；align items:center；}希望这对某人有所帮助。哇！很好的一个，正是我所需要的，我以前从未见过它增加高度：100%；它也垂直居中。
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
.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;
}
.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;
}
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
.vertically-center
{
display: table;
width: 100%; /* Optional */
height: 100%; /* Optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
display: flex;
align-items: center;
justify-content: center;
.center{
display: grid;
place-items: center;
}