Vertically centering a div inside another div
我想将一个div添加到另一个div中。
1 |
这是我目前使用的CSS。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #outerDiv{ width: 500px; height: 500px; position:relative; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 50%; left:50%; margin-top: -147px; margin-left: -144px; } |
如您所见,我现在使用的方法取决于
我发现使用
TL;博士
垂直对齐中间作品,但您必须在父元素上使用
这个解决方案在IE6和7中不起作用。你的解决方案更安全。但是,既然您使用CSS3和HTML5标记了您的问题,我认为您不介意使用现代解决方案。
经典解决方案(表格布局)
这是我原来的答案。它仍然可以正常工作,是最广泛支持的解决方案。表格布局会影响您的渲染性能,因此我建议您使用一种更现代的解决方案。
这是一个例子
测试中:
- FF3.5 +
- FF4 +
- Safari 5+
- Chrome 11+
- IE9 +
HTML
1 | your content |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 | .cn { display: table-cell; width: 500px; height: 500px; vertical-align: middle; text-align: center; } .inner { display: inline-block; width: 200px; height: 200px; } |
现代解决方案(转型)
由于现在转换得到了很好的支持,因此有一种更简单的方法。
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 | .cn { position: relative; width: 500px; height: 500px; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; } |
演示
?我最喜欢的现代解决方案(flexbox)
我开始越来越多地使用flexbox它现在也得到了很好的支持它是迄今为止最简单的方法。
CSS
1 2 3 4 5 | .cn { display: flex; justify-content: center; align-items: center; } |
演示
更多示例和可能性:
比较一页上的所有方法
实现这种水平和垂直居中的另一种方法是:
1 2 3 4 5 | .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } |
(参考)
另一种方法是使用Transform Translate
外部Div必须将
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | div.cn { position: relative; width: 200px; height: 200px; background: gray; text-align: center; } div.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; } |
1 | test |
测试中:
- Opera 24.0(最低12.1)
- Safari 5.1.7(至少4个带有-webkit-前缀)
- Firefox 31.0(带有-moz-前缀的最小3.6,不带前缀的16)
- Chrome 36(至少11个带-webkit-前缀,36个没有前缀)
- IE 11,10(最少9个带-ms-前缀,10个没有前缀)
- 更多浏览器,我可以使用吗?
垂直对齐任何只有3行CSS
HTML
1 2 3 | <p> Hello </p> |
简单
1 2 3 4 5 | .element { position: relative; top: 50%; transform: translateY(-50%); } |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .parent-of-element { position: relative; height: 500px; /* or height: 73.61% */ /* or height: 35vh */ /* or height: ANY HEIGHT */ } .element { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } |
根据shouldiprefix,这是你需要的唯一前缀
您也可以使用%作为.parent-of-element的'height'属性的值,只要element的父元素具有高度或某些内容可以扩展其垂直大小。
而不是把自己绑在一个难以编写和难以维护的CSS(这也需要仔细的跨浏览器验证!)的结,我发现放弃CSS并使用非常简单的HTML 1.0更好:
1 2 3 4 5 6 | <table id="outerDiv" cellpadding="0" cellspacing="0" border="0"> <tr> <td valign="middle" id="innerDiv"> </td> </tr> </table> |
这可以完成原始海报所需的一切,并且功能强大且易于维护。
我个人更喜欢使用隐藏的伪元素来跨越外部容器的整个高度,并将其与其他内容垂直对齐。
克里斯科伊尔有一篇关于这项技术的好文章。 http://css-tricks.com/centering-in-the-unknown/
这方面的巨大优势是可扩展性。您不必知道内容的高度,也不必担心内容的增长/缩小。这个解决方案缩放:)。
这里有一个你需要的所有CSS的小提琴和一个工作示例。
http://jsfiddle.net/m5sLze0d/
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | .center:before { content:""; /* Adding Extra Space Above Element */ display: inline-block; height: 100%; margin-right: -0.3em; vertical-align: middle; } .center_element { display:inline-block; float:none; vertical-align:middle; white-space:normal; text-align:left; } |
将div项目垂直居中在另一个div中
只需将容器设置为
请注意,垂直对齐将取决于父容器的高度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .cn { display:table; height:80px; background-color:#555; } .inner { display:table-cell; vertical-align:middle; color:#FFF; padding-left:10px; padding-right:10px; } |
1 2 | Item 1 Item 2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | #outerDiv{ width: 500px; height: 500px; position:relative; background:grey; display:flex; justify-content:center; align-items:center; } #innerDiv{ background:cyan; width: 284px; height: 290px; } |
1 | Inner Div |
你可以通过简单地添加上面提到的css样式来实现。祝一切顺利。用于查询写评论
当
1 | <!--content--> |
我一直使用以下解决方案一年多来,它也适用于IE 7和8。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <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> <p> Line 1 </p> <p> Line 2 </p> |
这适合我。可以定义外部div的宽度和高度。
这里的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .outer { position: relative; text-align: center; width: 100%; height: 150px; // Any height is allowed, also in %. background: gray; } .outer > div:first-child { position: absolute; top: 50%; left: 50%; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: red; } |
1 | Put here your text or div content! |
小提琴链接
试试这个
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid red; } #innerDiv{ width: 284px; height: 290px; position:absolute; top: 0px; left:0px; right:0px; bottom:0px; margin:auto; border:1px solid green; } |
如果你在阅读上面给出的奇妙答案后仍然不明白。
以下是两个如何实现它的简单示例。
Using display: table-cell
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .wrapper { display: table-cell; vertical-align: middle; text-align: center; width: 400px; height: 300px; border: 1px solid #555; } .container { display: inline-block; text-align: left; padding: 20px; border: 1px solid #cd0000; } |
1 | Center align a div using"display: table-cell" |
Using flex-box (display: flex)
1 2 3 4 5 6 7 8 9 10 11 12 13 | .wrapper { display: flex; justify-content: center; width: 400px; height: 300px; border: 1px solid #555; } .container { align-self: center; padding: 20px; border: 1px solid #cd0000; } |
1 | Centering a div using"display: flex" |
注意:在使用上述实现之前,请检查display:table-cell和flex的浏览器兼容性。
在这里输入图像描述100%它的工作原理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .div1{ height: 300px; background: red; width: 100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; } .div2{ background: green; height: 100px; width: 100%; } sdfd |
https://jsfiddle.net/Mangesh1556/btn1mozd/4/
您可以使用flex在CSS中垂直和水平居中div;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; margin:0 auto; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } #innerDiv{ width: 284px; height: 290px; border:1px solid #eee; } |
第二个是如下;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #outerDiv{ width: 500px; height: 500px; position:relative; border:1px solid #000; } #innerDiv{ max-width: 300px; height: 200px; background-color: blue; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; border:1px solid #000; border-radius:4px; } |
结果HTML:
1 |
你可以用一个简单的javascript(jQuery)块来做到这一点。
CSS:
1 2 3 | #outerDiv{ height:100%; } |
使用Javascript:
1 2 3 4 | <script type="text/javascript"> $(document).ready(function () { $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2); }); |
这将回到IE6!
IE6也需要
[将强制IE6默认严格模式]。
(当然,盒子着色仅用于演示目的)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | #outer{ width: 205px; height: 205px; margin: auto; text-align: center; } #inner{ text-align: left; vertical-align: middle; width: 120px; height: 120px; display: inline-block; } #center{ height: 100%; width:0px; vertical-align: middle; display: inline-block; } div {background: rgba(0,128,255,.6)} |
1 | The inner DIV |
将div垂直居中于另一个div内
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #outerDiv{ width: 500px; height: 500px; position:relative; background-color: lightgrey; } #innerDiv{ width: 284px; height: 290px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ background-color: grey; } |
1 |
对于没有指定它的高度值的innerdiv,没有纯css解决方案使其垂直居中。一个javascript解决方案可以获取innerdiv的offsetHeight,然后计算style.marginTop。
尝试对齐内部元素,如下所示:
1 2 3 4 | top: 0; bottom: 0; margin: auto; display: table; |
而且当然:
1 | position: absolute; |
我想展示另一种可以使用CSS3
我们可以使用
使用
看看这个现场演示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html> <head> <style> #parent{ background-color:blue; width: 500px; height: 500px; position:relative; } #child{ background-color:red; width: 284px; height: 250px; position:absolute; /* the middle of the parent(50%) minus half of the child (125px) will always center vertically the child inside the parent */ margin-top: -moz-calc(50% - 125px); /* WebKit */ margin-top: -webkit-calc(50% - 125px); /* Opera */ margin-top: -o-calc(50% - 125px); /* Standard */ margin-top: calc(50% - 125px); } </style> </head> <body> </body> </html> |
输出:
父元素上的文本对齐中心,在子元素上显示内联块。这将集中所有任何东西。我相信它的称呼是"块浮动"。
1 2 3 4 5 6 7 8 9 10 11 12 13 | some content <!-- end outer --> <style> div.outer{ width: 100%; text-align: center; } div.inner{ display: inline-block; text-align: left } </style> |
这也是浮动的好选择,祝你好运!
要垂直和水平居中对齐:
1 2 3 4 5 6 7 8 9 | #parentDiv{ display:table; text-align:center; } #child { display:table-cell; vertical-align:middle; } |
我知道这个问题是在一年前创建的...
无论如何,感谢CSS3你可以很容易地垂直对齐div中的div(例如http://jsfiddle.net/mcSfe/98/)
1 2 3 4 5 6 7 8 9 | Go to Hell! div { display:-moz-box; -moz-box-align:center; } |