如何在div中垂直对齐元素？

我有一个div，有两个图像和一个h1。它们都需要在div内垂直对齐，彼此相邻。其中一个图像需要absolute定位在div内。

在所有常见浏览器上工作所需的CSS是什么？

<div id="header"><img src=".." ></img><h1>testing...</h1><img src="..."></img></div>
1807967 次浏览
小开 
<div id="header" style="display: table-cell; vertical-align:middle;">

…

或css

.someClass{display: table-cell;vertical-align:middle;}

浏览器覆盖率

小开

默认情况下，h1是一个块元素，将在第一个img之后的行上呈现，并将导致第二个img出现在块之后的行上。

要阻止这种情况发生，您可以将h1设置为具有内联流行为：

#header > h1 { display: inline; }

至于imgdiv内的绝对定位，您需要将包含的div设置为“已知大小”，然后才能正常工作。根据我的经验，您还需要更改位置属性，使其远离默认位置：相对对我有用：

#header { position: relative; width: 20em; height: 20em; }#img-for-abs-positioning { position: absolute; top: 0; left: 0; }

如果你能做到这一点，你可能想尝试从div.header中逐步删除高度、宽度、位置属性，以获得所需的最小属性来获得你想要的效果。

更新：

以下是一个适用于Firefox 3的完整示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Example of vertical positioning inside a div</title><style type="text/css">#header > h1 { display: inline; }#header { border: solid 1px red;position: relative; }#img-for-abs-positioning { position: absolute;bottom: -1em; right: 2em; }</style></head>    
<body><div id="header"><img src="#" alt="Image 1" width="40" height="40" /><h1>Header</h1><img src="#" alt="Image 2" width="40" height="40"id="img-for-abs-positioning" /></div></body></html>

小开

所有这些都需要在div内垂直对齐

对齐如何？图像的顶部与文本的顶部对齐？

其中一个图像需要绝对定位在div中。

相对于DIV的绝对位置？也许你可以勾勒出你要找的东西…？

fd描述绝对定位的步骤，以及调整H1元素的显示，以便图像将与其内嵌。为此，我将补充一点，您可以使用vertical-align样式对齐图像：

#header h1 { display: inline; }#header img { vertical-align: middle; }

…这将把标题和图像放在一起，顶部边缘对齐。存在其他对齐选项；看留档。您可能还会发现删除DIV并将图像移动到H1元素中是有益的-这为容器提供了语义价值，并消除了调整H1显示的需要：

<h1 id=header"><img src=".." ></img>testing...<img src="..."></img></h1>
小开
最佳答案

哇，这个问题很受欢迎。它是基于对vertical-align属性的误解。这篇精彩的文章解释了它：

理解#0，或“如何（不）垂直中心内容”由Gavin Kistner。

"如何在CSS中居中"是一个很棒的Web工具，它有助于为不同的情况找到必要的CSS中心属性。

简而言之（并防止链接腐烂）：

  • 内联元素（和只有内联元素）可以通过vertical-align: middle在它们的上下文中垂直对齐。然而，“上下文”不是整个父容器的高度，而是它们所在的文本行的高度。jsfiddle示例
  • 对于块元素，垂直对齐更难，并且强烈取决于具体情况：
    • 如果内部元素可以有固定高度，您可以将其位置设为absolute并指定其height、margin-top和top位置。jsfiddle示例
    • 如果居中元素由一条线组成和其父级高度是固定的，您可以简单地设置容器的line-height来填充其高度。根据我的经验，这种方法非常通用。jsfiddle示例
    • 还有更多这样的特殊情况。
小开

它为我工作：

.vcontainer {min-height: 10em;display: table-cell;vertical-align: middle;}
小开

使用这个公式，它将永远工作没有裂缝：

#outer {height: 400px; overflow: hidden; position: relative;}#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* For explorer only*/#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}
#inner {position: relative; top: -50%} /* For explorer only *//* Optional: #inner[id] {position: static;} */
<div id="outer"><div id="middle"><div id="inner">any textany heightany content, for example generated from DBeverything is vertically centered</div></div></div>

小开

我一个朋友的技巧：

div:before {content:" "; display:inline-block; height:100%; vertical-align:middle;}div p {display:inline-block;}
<div style="height:100px; border:1px solid;"><p style="border:1px dotted;">I'm vertically centered.</p></div>

演示这里。

小开

我使用了这个非常简单的代码：

div.ext-box { display: table; width:100%;}div.int-box { display: table-cell; vertical-align: middle; }
<div class="ext-box"><div class="int-box"><h2>Some txt</h2><p>bla bla bla</p></div></div>

显然，无论你使用.class还是#id，结果都不会改变。

小开

只是这个：

<div><table style="width: 100%; height: 100%"><tr><td style="width: 100%; height: 100%; vertical-align: middle;">What ever you want vertically-aligned</td></tr></table></div>

div中的单元格表处理垂直对齐，并向下兼容回石器时代！

小开

只需在div中使用单元格表！只需将单元格和表高度和with设置为100%，您就可以使用垂直对齐。

div中的单元格表处理垂直对齐，并向下兼容回石器时代！

小开

这是另一种（响应式）方法：

html,body {height: 100%;}body {margin: 0;}
.table {display: table;width:  auto;table-layout:auto;height: 100%;}.table:nth-child(even) {background: #a9edc3;}.table:nth-child(odd) {background: #eda9ce;}
.tr {display: table-row;}.td {display: table-cell;width: 50%;vertical-align: middle;}

http://jsfiddle.net/herrfischerhamburg/JcVxz/

小开 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head><style type="text/css">#style_center { position:relative; top:50%; left:50%; }#style_center_absolute { position:absolute; top:50px; left:50px; }<!--#style_center { position:relative; top:50%; left:50%; height:50px; margin-top:-25px; }--></style></head>
<body><div style="height:200px; width:200px; background:#00FF00"><div id="style_center">+</div></div></body></html>
小开

几乎所有的方法都需要指定高度，但通常我们没有任何高度。

所以这里有一个CSS 3三行技巧，不需要知道高度。

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

它甚至在IE9中也得到支持。

带有其供应商前缀：

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

来源：垂直对齐任何东西只有3行CSS

小开

一年多以来，我一直在使用以下解决方案（没有定位，也没有行高），它适用于Internet Explorer 7和Internet Explorer 8。

<style>.outer {font-size: 0;width: 400px;height: 400px;background: orange;text-align: center;display: inline-block;}
.outer .emptyDiv {height: 100%;background: orange;visibility: collapse;}
.outer .inner {padding: 10px;background: red;font: bold 12px Arial;}
.verticalCenter {display: inline-block;*display: inline;zoom: 1;vertical-align: middle;}</style>
<div class="outer"><div class="emptyDiv verticalCenter"></div><div class="inner verticalCenter"><p>Line 1</p><p>Line 2</p></div></div>
小开

这是我个人对div中的i元素的解决方案。

JSFiddle示例

超文本标记语言

<div class="circle"><i class="fa fa-plus icon"></i></div>

css

.circle {border-radius: 50%;color: blue;background-color: red;height:100px;width:100px;text-align: center;line-height: 100px;}
.icon {font-size: 50px;vertical-align: middle;}
小开

要将块元素定位到中心（在Internet Explorer 9及以上版本中工作），它需要一个包装器div：

.vcontainer {position: relative;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
小开

我的技巧是在div中放置一个具有一行和一列的表，设置100%的宽度和高度，以及属性垂直对齐：中间：

<div>
<table style="width:100%; height:100%;"><tr><td style="vertical-align:middle;">BUTTON TEXT</td></tr></table>
</div>

小提琴：http://jsfiddle.net/joan16v/sbqjnn9q/

小开

现在Flexbox支持正在增加，应用于包含元素的这个CSS将垂直居中所有包含的项目（除了那些自己指定对齐方式的项目，例如align-self:start）

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

如果您还需要针对Internet Explorer 10和较旧的（<4.4（KitKat））Android浏览器，请使用前缀版本：

.container {display: -ms-flexbox;display: -webkit-flex;display: flex;
-ms-flex-align: center;-webkit-align-items: center;-webkit-box-align: center;align-items: center;}
小开

对我来说，它是这样工作的：

<div style="width:70px; height:68px; float:right; display: table-cell; line-height: 68px"><a href="javascript:void(0)" style="margin-left: 4px; line-height: 2" class="btn btn-primary">Login</a></div>

使用Bootstrap类将“a”元素转换为按钮，现在它在外部“div”内垂直居中。

小开

使用CSS垂直居中，您可以让外部容器充当表格，内容充当表格单元格。在这种格式下，您的对象将保持居中。：）

我在JSFiddle中嵌套了多个对象作为示例，但核心思想是这样的：

超文本标记语言

<div class="circle"><div class="content">Some text</div></div>

css

.circle {/* Act as a table so we can center vertically its child */display: table;/* Set dimensions */height: 200px;width: 200px;/* Horizontal center text */text-align: center;/* Create a red circle */border-radius: 100%;background: red;}
.content {/* Act as a table cell */display: table-cell;/* And now we can vertically center! */vertical-align: middle;/* Some basic markup */font-size: 30px;font-weight: bold;color: white;}

多对象示例：

超文本标记语言

<div class="container"><div class="content">
<div class="centerhoriz">
<div class="circle"><div class="content">Some text</div><!-- content --></div><!-- circle -->
<div class="square"><div class="content"><div id="smallcircle"></div></div><!-- content --></div><!-- square -->
</div><!-- center-horiz -->
</div><!-- content --></div><!-- container -->

css

.container {display: table;height: 500px;width: 300px;text-align: center;background: lightblue;}
.centerhoriz {display: inline-block;}
.circle {display: table;height: 200px;width: 200px;text-align: center;background: red;border-radius: 100%;margin: 10px;}
.square {display: table;height: 200px;width: 200px;text-align: center;background: blue;margin: 10px;}
.content {display: table-cell;vertical-align: middle;font-size: 30px;font-weight: bold;color: white;}
#smallcircle {display: inline-block;height: 50px;width: 50px;background: green;border-radius: 100%;}

结果

结果

https://jsfiddle.net/martjemeyer/ybs032uc/1/

小开

我们可以使用CSS函数计算来计算元素的大小，然后相应地定位子元素。

超文本标记语言示例：

<div class="box"><span><a href="#">Some Text</a></span></div>

和CSS：

.box {display: block;background: #60D3E8;position: relative;width: 300px;height: 200px;text-align: center;}
.box span {font: bold 20px/20px 'source code pro', sans-serif;position: absolute;left: 0;right: 0;top: calc(50% - 10px);}
a {color: white;text-decoration: none;}

在此处创建演示：https://jsfiddle.net/xnjq1t22/

此解决方案也适用于响应式divheight和width。

注意：calc函数未测试与旧浏览器的兼容性。

小开

我发现了一个新的解决方法，可以使用CSS 3在div中垂直对齐多个文本行（我还使用bootstrap v3网格系统来美化UI），如下所示：

.immediate-parent-of-text-containing-div {height: 50px;         /* Or any fixed height that suits you. */}
.text-containing-div {display: inline-grid;align-items: center;text-align: center;height: 100%;}

根据我的理解，包含元素的文本的直接父级必须有一定的高度。

小开

垂直和水平对齐元素

使用其中任何一个。结果将是相同的：

  1. bootstrap4
  2. CSS3

在此处输入图片描述

1. Bootstrap 4.3+

垂直对齐：d-flex align-items-center

水平对齐：d-flex justify-content-center

对于垂直和水平对齐：d-flex align-items-center justify-content-center

.container {height: 180px;width:100%;background-color: blueviolet;}
.container > div {background-color: white;padding: 1rem;}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"rel="stylesheet"/>
<div class="d-flex align-items-center justify-content-center container"><div>I am in Center</div></div>

2. CSS 3

.container {height: 180px;width:100%;background-color: blueviolet;}
.container > div {background-color: white;padding: 1rem;}
.center {display: flex;align-items: center;justify-content: center;}
<div class="container center"><div>I am in Center</div></div>

小开 
 .outer {display: flex;align-items: center;justify-content: center;}
小开

使用显示柔性，首先你需要包装你想要对齐的项目的容器：

<div class="outdiv"><div class="indiv"><span>test1</span><span>test2</span></div></div>

然后将以下CSS内容应用于我的示例中的包装div或outdiv：

.outdiv {display: flex;justify-content: center;align-items: center;}
小开

我最喜欢的新方法是使用CSS网格：

/* technique */
.wrapper {display: inline-grid;grid-auto-flow: column;align-items: center;justify-content: center;}
/* visual emphasis */
.wrapper {border: 1px solid red;height: 180px;width: 400px;}
img {width: 100px;height: 80px;background: #fafafa;}
img:nth-child(2) {height: 120px;}
<div class="wrapper"><img src="https://source.unsplash.com/random/100x80/?bear"><img src="https://source.unsplash.com/random/100x120/?lion"><img src="https://source.unsplash.com/random/100x80/?tiger"></div>

小开

在父div中创建中心子div的三种方法

  • 绝对定位法
  • flexbox方法
  • 变换/翻译方法

在此输入图片描述

演示

/* Absolute Positioning Method */.parent1 {background: darkcyan;width: 200px;height: 200px;position: relative;}.child1 {background: white;height: 30px;width: 30px;position: absolute;top: 50%;left: 50%;margin: -15px;}
/* Flexbox Method */.parent2 {display: flex;justify-content: center;align-items: center;background: darkcyan;height: 200px;width: 200px;}.child2 {background: white;height: 30px;width: 30px;}
/* Transform/Translate Method */.parent3 {position: relative;height: 200px;width: 200px;background: darkcyan;}.child3 {background: white;height: 30px;width: 30px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
<div class="parent1"><div class="child1"></div></div><hr />
<div class="parent2"><div class="child2"></div></div><hr />
<div class="parent3"><div class="child3"></div></div>

小开

仅使用Bootstrap类：

  • div：class="container d-flex"
  • div中的元素：class="m-auto"

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container d-flex mt-5" style="height:110px; background-color: #333;"><h2 class="m-auto"><a href="https://hovermind.com/">H➲VER➾M⇡ND</a></h2></div>


提交答案