如何垂直居中divs?

我试图做一个小的用户名和密码input框。

我想问,如何垂直alignment一个div?

我拥有的是:

<div id="Login" class="BlackStrip floatright"> <div id="Username" class="floatleft">Username<br>Password</div> <div id="Form" class="floatleft"> <form action="" method="post"> <input type="text" border="0"><br> <input type="password" border="0"> </form> </div> </div> 

我怎样才能使ID与ID用户名和表格垂直自己到中心? 我试着把:

 vertical-align: middle; 

在与IDlogin的div的CSS,但它似乎并没有工作。 任何帮助,将不胜感激。

现代浏览器中最好的方法是使用flexbox:

 #Login { display: flex; align-items: center; } 

某些浏览器需要供应商前缀。 对于没有支持flexbox的旧浏览器(例如IE 9及更低版本),您需要使用其中一种较旧的方法实施回退解决scheme。

推荐阅读

  • 浏览器支持
  • Flexbox指南
  • 使用CSS灵活框

您可以垂直alignment另一个div中的div。 在JSFiddle上看到这个例子,或者考虑下面的例子。

HTML

 <div class="outerDiv"> <div class="innerDiv"> My Vertical Div </div> </div> 

CSS

 .outerDiv { display: inline-flex; // <-- This is responsible for vertical alignment height: 400px; background-color: red; color: white; } .innerDiv { margin: auto 5px; // <-- This is responsible for vertical alignment background-color: green; } 

.innerDiv的边距必须采用以下格式: margin: auto *px;

[哪里, *是你想要的价值。]

display: inline-flex支持HTML5支持的最新(更新/当前版本)浏览器。

它可能无法在Internet Explorer中工作:P 🙂

总是尝试为任何垂直alignment的div(即innerDiv)定义高度来解决兼容性问题。

这可以通过3行CSS来完成,并兼容(并且包括)IE9:

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

例如: http : //jsfiddle.net/cas07zq8/

信用

如果你知道这个高度,你可以使用绝对定位和一个负的margin-top如下所示:

 #Login { width:400px; height:400px; position:absolute; top:50%; left:50%; margin-left:-200px; /* width / -2 */ margin-top:-200px; /* height / -2 */ } 

否则,没有真正的方法来垂直居中一个div只有CSS

我很晚了,但我自己想出了这个,这是我最喜欢的垂直alignment方式之一。 这很简单,很容易理解发生了什么。

你可以使用:before css属性在父div的开头插入一个div,给它display:inline-blockvertical-align:middle ,然后把这些属性赋予子div。 由于vertical-align是为了沿线alignment,所以这些内联div将被视为一条线。

使:before div height:100% :before height:100% ,并且子div将自动跟随和alignment在一个非常高的“线”中间。

 .parent:before, .child { display:inline-block; vertical-align:middle; } .parent:before { content:""; // so that it shows up height:100%; // so it takes up the full height } 

这里是一个小提琴来演示我在说什么。 孩子的div可以是任何高度,你永远不必修改其边际/填充。
这是一个更解释性的小提琴 。

如果你不喜欢:before ,你总是可以手动input一个div。

 <div class="parent"> <div class="before"></div> <div class="child"> content </div> </div> 

然后只是重新分配.parent:before .parent .before

我发现这个网站很有用: http : //www.vanseodesign.com/css/vertical-centering/这工作对我来说:

HTML

 <div id="parent"> <div id="child">Content here</div> </div> 

CSS

 #parent { padding: 5% 0; } #child { padding: 10% 0; } 

@GáborNagy对另一篇文章的评论是我能find的最简单的解决scheme,对我来说就像一个魅力,因为他带来了一个jsfiddle我在这里复制一个小的补充:

CSS:

 #wrapper { display: table; height: 150px; width: 800px; border: 1px solid red; } #cell { display: table-cell; vertical-align: middle; } 

HTML:

 <div id="wrapper"> <div id="cell"> <div class="content"> Content goes here </div> </div> </div> 

如果你希望水平alignment,则必须在“单元格”div中添加另一个div“inner-cell”,并赋予它以下风​​格:

 #inner-cell{ width: 250px; display: block; margin: 0 auto; } 

垂直alignment一直是棘手的。

这里我已经介绍了一些垂直alignmentdiv的方法。

http://jsfiddle.net/3puHE/

HTML:

 <div style="display:flex;"> <div class="container table"> <div class="tableCell"> <div class="content"><em>Table</em> method</div> </div> </div> <div class="container flex"> <div class="content new"><em>Flex</em> method<br></div> </div> <div class="container relative"> <div class="content"><em>Position</em> method</div> </div> <div class="container margin"> <div class="content"><em>Margin</em> method</div> </div> </div> 

CSS:

 em{font-style: normal;font-weight: bold;} .container { width:200px;height:200px;background:#ccc; margin: 5px; text-align: center; } .content{ width:100px; height: 100px;background:#37a;margin:auto;color: #fff; } .table{display: table;} .table > div{display: table-cell;height: 100%;width: 100%;vertical-align: middle;} .flex{display: flex;} .relative{position: relative;} .relative > div {position: absolute;top: 0;left: 0;right: 0;bottom: 0;} .margin > div {position:relative; margin-top: 50%;top: -50px;} 

http://jsfiddle.net/dvL512e7/

除非alignment的div具有固定的高度,请尝试使用以下CSS到alignment的div:

 { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: table; } 

在我的Firefox和铬的工作:

CSS:

 display: flex; justify-content: center; // vertical align align-items: center; // horizontal align 

如果您使用的是固定高度的div,则可以根据您的devise需要使用padding-top。 或者你可以使用top:50%。 如果我们使用div比垂直alignment不起作用,所以我们根据需要使用填充顶部或位置。

我发现了一种对我很好的方法。 下一个脚本将插入一个不可见的图像(与bgcolor或者transparant gif相同),高度等于屏幕上空白大小的一半。 效果是一个完美的垂直alignment。

假设你有一个标题div(height = 100)和一个页脚div(height = 50),你想alignment的主div的内容高度为300:

 <script type="text/javascript" charset="utf-8"> var screen = window.innerHeight; var content = 150 + 300; var imgheight = ( screen - content) / 2 ; document.write("<img src='empty.jpg' height='" + imgheight + "'>"); </script> 

将脚本放置在要alignment的内容之前!

在我的情况下,我喜欢alignment的内容是宽高比为100:85(宽:高)的图像(宽度= 95%)。图像的高度是其宽度的85%。 宽度是屏幕宽度的95%。

我因此使用:

 var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth )); 

结合这个脚本

 <body onResize="window.location.href = window.location.href;"> 

而且你有一个平滑的垂直alignment。

希望这也适合你!

我需要指定最小高度

 #login display: flex align-items: center justify-content: center min-height: 16em 

你有试过这个吗?

 .parentdiv { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 300px; // at least you have to specify height } 

希望这可以帮助

div不能以这种方式垂直alignment,但可以使用边距或位置:相对于修改其位置。