How to vertically center divs?
我正在尝试制作一个小的用户名和密码输入框。
我想问一下,你如何垂直对齐一个div?
我有的是:
1 2 3 4 5 6 | UsernamePassword <form action="" method="post"> <input type="text" border="0"> <input type="password" border="0"> </form> |
如何使用id用户名和表单将div垂直对齐到中心? 我试图把:
1 | vertical-align: middle; |
在CSS中为id登录的div,但它似乎不起作用。 任何帮助,将不胜感激。
现代浏览器中最好的方法是使用flexbox:
1 2 3 4 | #Login { display: flex; align-items: center; } |
有些浏览器需要供应商前缀。对于没有Flexbox支持的旧版浏览器(例如IE 9及更低版本),您需要使用其中一种旧方法实现回退解决方案。
推荐阅读
- 浏览器支持
- Flexbox指南
- 使用CSS灵活盒子
这可以通过3行CSS完成,并且与IE9兼容(包括):
1 2 3 4 5 | .element { position: relative; top: 50%; transform: translateY(-50%); } |
示例:http://jsfiddle.net/cas07zq8/
信用
您可以在另一个div中垂直对齐div。在JSFiddle上查看此示例或考虑下面的示例。
HTML
1 | My Vertical Div |
CSS
1 2 3 4 5 6 7 8 9 10 11 | .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; } |
[其中,
支持HTML5的最新(更新/当前版本)浏览器支持
它可能无法在Internet Explorer中工作:P :)
始终尝试为任何垂直对齐的div(即innerDiv)定义高度,以抵消兼容性问题。
我参加派对的时间已经很晚了,但我自己想出了这个,这是我最喜欢的垂直对齐快速黑客之一。这很简单,很容易理解发生了什么。
使用
使
1 2 3 4 5 6 7 8 | .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可以是任何高度,您永远不必修改其边距/填充。
这是一个更具说明力的小提琴。
如果您不喜欢
1 | content |
然后只需将
如果你知道高度,你可以使用负数
1 2 3 4 5 6 7 8 9 | #Login { width:400px; height:400px; position:absolute; top:50%; left:50%; margin-left:-200px; /* width / -2 */ margin-top:-200px; /* height / -2 */ } |
否则,没有真正的方法可以用CSS垂直居中div
在我的firefox和chrome中工作:
CSS:
1 2 3 | display: flex; justify-content: center; // vertical align align-items: center; // horizontal align |
我发现这个网站很有用:http://www.vanseodesign.com/css/vertical-centering/
这对我有用:
HTML
1 | Content here |
CSS
1 2 3 4 5 6 7 | #parent { padding: 5% 0; } #child { padding: 10% 0; } |
@GáborNagy对另一篇文章的评论是我能找到的最简单的解决方案,对我来说就像一个魅力,因为他带来了一个jsfiddle,我在这里复制一个小小的补充:
CSS:
1 2 3 4 5 6 7 8 9 10 11 | #wrapper { display: table; height: 150px; width: 800px; border: 1px solid red; } #cell { display: table-cell; vertical-align: middle; } |
HTML:
1 | Content goes here |
如果你想在水平方向上对齐它,你必须在"cell"div中添加另一个div"inner-cell",并给它这样的风格:
1 2 3 4 5 | #inner-cell{ width: 250px; display: block; margin: 0 auto; } |
垂直对齐一直很棘手。
在这里,我已经介绍了一些垂直对齐div的方法。
http://jsfiddle.net/3puHE/
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Table method Flex method Position method Margin method |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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/
除非对齐的div具有固定的高度,否则请尝试使用以下CSS来对齐div:
1 2 3 4 5 6 7 8 9 | { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: table; } |
我需要指定最小高度
1 2 3 4 5 | #login display: flex align-items: center justify-content: center min-height: 16em |
使div元素居中的最简单方法是使用具有以下属性的此类。
1 2 3 4 5 6 | .light { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } |
如果你使用固定高度div,你可以根据你的设计需要使用填充顶部。
或者你可以使用top:50%。如果我们使用div而不是垂直对齐不起作用,所以我们根据需要使用填充顶部或位置。
将子元素居中放在div中。它适用于所有屏幕尺寸
1 2 3 4 5 6 7 8 9 10 | #parent { padding: 5% 0; } #child { padding: 10% 0; } Content here |
有关详细信息,您可以访问此链接
我发现了一种对我有用的方法。下一个脚本插入一个不可见的图像(与bgcolor或transparant gif相同),其高度等于屏幕上白色空间大小的一半。效果是完美的垂直对齐。
假设您有一个标题div(高度= 100)和一个页脚div(高度= 50),并且您要对齐的主div中的内容高度为300:
1 2 3 4 5 | <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 +"'>"); |
您将脚本放在要对齐的内容之前!
在我的例子中,我喜欢对齐的内容是图像(宽度= 95%),宽高比为100:85(宽度:高度)。图像高度的85%是宽度的85%。宽度为屏幕宽度的95%。
因此我使用了:
1 | var content = 150 + ( 0.85 * ( 0.95 * window.innerWidth )); |
将此脚本与
1 | <body onResize="window.location.href = window.location.href;"> |
并且你有一个平滑的垂直对齐方式。
希望这也适合你!
你试试这个吗?
1 2 3 4 5 6 | .parentdiv { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 300px; // at least you have to specify height } |
希望这可以帮助
div不能以这种方式垂直对齐,但是你可以使用margin或position:relative来修改它的位置。