边距自动在垂直对齐后不工作
边距自动在垂直对齐后不工作
提问于 2016-05-19 17:57:41
我知道margin:0 auto;将对一个div水平，但我也希望它垂直中心，所以我使用这个
vertical-align:middle;
top:50%;
transform:translate Y(-50%);但是当我运行这个代码时，div是垂直的，但它不是水平的中心。请有人给我一个更好的提示，如何将一个div垂直和水平的中心。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-05-19 18:00:45
Stack Overflow用户
发布于 2016-05-19 18:04:54
Flex已经变得非常流行，我建议您这样做，因为它的其他功能。
小提琴：https://jsfiddle.net/ne38nx7t/1/
HTML：
<div class="Aligner">
<div class="Aligner-item">Apples</div>
</div>CSS：
.Aligner {
height: 100px;
border: 2px solid blue;
display: flex;
align-items: center;
justify-content: center;
}Stack Overflow用户
发布于 2016-05-19 18:04:07
我还没有看到您的整个代码可以随意地将您的代码放到小提琴上，直到检查下面创建的小提琴，将内容水平地和垂直地集中，在内容中有一个动态高度。
http://jsfiddle.net/Q92Lb/2/
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#page{display:table;overflow:hidden;margin:0px auto;}
*:first-child+html #page {position:relative;}/*ie7*/
* html #page{position:relative;}/*ie6*/
#content_container{display:table-cell;vertical-align: middle;}
*:first-child+html #content_container{position:absolute;top:50%;}/*ie7*/
* html #content_container{position:absolute;top:50%;}/*ie6*/
*:first-child+html #content{position:relative;top:-50%;}/*ie7*/
* html #content{position:relative;top:-50%;}/*ie6*/
html,body{height:100%;}
#page{height:100%;width:465px;}
</style>
</head>
<body>
<div id="page">
<div id="content_container">
<div id="content">
<p>your content</p>
</div>
</div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37330785
复制相关文章
相似问题
腾讯云开发者
