垂直对齐div的中心
[英]Align vertically center of the div
问题描述
我有以下代码：
body { height: 100%; } section { height: 70%; } .first { height: 10%; } .second { height: 10%; } .third { height: 10%; }
<section class="main-container"> <div class="first"> content goes here </div> <div class="second"> content goes here </div> <div class="third"> content goes here </div> </section>
我需要first ， second和third类的内容应垂直对齐中心。
5 个解决方案
解决方案1
1 2017-01-24 10:03:22
如果要使用css3 flexbox，可以执行以下操作：
.main-container { height:calc(100vh); display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .first, .second, .third { flex: 0 1 auto; }
<section class="main-container"> <div class="first"> content goes here </div> <div class="second"> content goes here </div> <div class="third"> content goes here </div> </section>
解决方案2
0 2017-01-24 09:59:28
添加下面的CSS会将文本带到div的垂直中间
display: table-cell;
vertical-align: middle;
为了获得更好的效果，您可以将以下样式赋予外部div。
display:table;
解决方案3
0 2017-01-24 10:07:03
最简单的方法是使用flex。
您应该注意该height: xx%; 需要计算父级的已知高度值。 由于html没有设置height，因此body{height:100%}是100%的东西（对于孩子来说）。
html, body, section{ height: 100%;/* section inherits height value from body which inherits it from html */ margin: 0; } section, .first, .second, .third { margin:0; display: flex; flex-flow: column; align-items: center; justify-content: center; width:100%; } section { } .first { height: 10%; } .second { flex: 1; background:gray } .third { height: 10%; }
<body> <section class="main-container"> <div class="first"> // content goes here </div> <div class="second"> // content goes here </div> <div class="third"> // content goes here </div> </section> </body>
还是您说的是中间的中心站点内容，flex也很容易做到 （相同的CSS规则，但此处不需要flex嵌入） ：
html, body, section{ height: 100%; margin: 0; } section { display: flex; flex-flow: column; align-items: center; justify-content: center; width:100%; background:gray } section { } .first { height: 10%; } .second { height: 10%; background:lightgray } .third { height: 10%; }
<body> <section class="main-container"> <div class="first"> // content goes here </div> <div class="second"> // content goes here </div> <div class="third"> // content goes here </div> </section> </body>
解决方案4
0 已采纳 2017-01-24 10:42:48
使用Flex
body,html { height: 100%; } section { height: 70%; display:flex; align-items: center; justify-content: center; } .first { height: 10%; background:green; } .second { height: 10%; background:blue; } .third { height: 10%; background:orange; }
<section class="main-container"> <div class="first"> content goes here </div> <div class="second"> content goes here </div> <div class="third"> content goes here </div> </section
解决方案5
-1 2017-01-24 10:04:46
看一下这个
内联CSS
<div class="section" style="text-align:center">...</div>
纯CSS
.section {
text-align:center;
}
将div垂直居中对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.