CSS3 垂直居中实现办法
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">CSS里实现水平居中非常容易，inline元素用text-align:center;，block元素用margin:auto;就行了。但要实现垂直居中确是一大<span style="color: black;">困难</span>。本篇收集了<span style="color: black;">有些</span>已知的<span style="color: black;">方法</span>，整理出来，以备将来取用。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• Flex弹性盒子 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">• absolute绝对定位 </p>• vh视口单位
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">Flex弹性盒子</strong>Flex弹性盒子应该是<span style="color: black;">处理</span>垂直居中的最佳<span style="color: black;">方法</span>，随着IE10的<span style="color: black;">逐步</span>没落，惹人烦的兼容性问题正<span style="color: black;">逐步</span>被克服。用法很简单，给<span style="color: black;">必须</span>垂直居中的元素的父容器设置display:flex，并指定align-items: center;就搞定了：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">body {
…
display: flex;
align-items: center;
}
main {
…
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<body>
<main>
<div>用flex实现</div>
<p>垂直居中</p>
</main>
</body></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">咱们</span>想将main垂直居中，只需给它的父元素body设display:flex;和align-items: center;<span style="color: black;">就可</span>。main里有一个div和一个p，想将这两个元素在main里垂直居中，<span style="color: black;">一样</span>只需给它们的父元素main设display:flex;和align-items: center;。另外justify-content和flex-direction用于<span style="color: black;">调节</span>这两个子元素水平居中的<span style="color: black;">摆列</span><span style="color: black;">次序</span>。（<span style="color: black;">倘若</span>对弹性盒子及其属性不熟悉，<span style="color: black;">能够</span>参照CSS3 flex盒子语法介绍，<span style="color: black;">亦</span><span style="color: black;">能够</span>点例子页面试一下）</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">absolute绝对定位</strong>一种很<span style="color: black;">平常</span>的<span style="color: black;">办法</span>是用绝对定位<span style="color: black;">协同</span>负值margin。思路是设成absolute后，指定top和left为50%，将元素的左上角定位点放到页面正中心。<span style="color: black;">而后</span>用负值margin一半的元素宽高度将元素拉回页面正中心：</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">main {
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
…
}</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">但缺点是你<span style="color: black;">必须</span>事先指定元素的width和height，否则<span style="color: black;">没</span>法给负margin设值，<span style="color: black;">显出</span><span style="color: black;">不足</span>灵活。<span style="color: black;">并不</span>必固定元素的宽高，改用translate()位移来替代负margin，实现将元素拉回页面正中心：（<span style="color: black;">倘若</span>对变形元素不熟，<span style="color: black;">能够</span>参照CSS3 transform介绍）</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">main {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
…
}
<main>
<div>用absolute实现</div>
<p>垂直居中</p>
</main></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">用绝对定位absolute让<span style="color: black;">必须</span>垂直居中的元素脱离文档流，指定top和left各50%将元素左上角定位点设到页面正中心。<span style="color: black;">而后</span>用translate()各负50%，将元素拉回页面正中心。思路和负margin是一致的，<span style="color: black;">优良</span>是不必固定元素的宽高了。缺点是absolute绝对定位威力太大，要<span style="color: black;">思虑</span><span style="color: black;">是不是</span>会对页面布局造成影响。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vh视口单位 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">上例中translate()将元素回拉的前提是，absolute绝对定位来设top和left各50%。但<span style="color: black;">倘若</span>看到absolute绝对定位就觉得不舒服，<span style="color: black;">能够</span>改成vh视口单位来设元素左上角的定位点。 </p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">vh<span style="color: black;">便是</span>视口高度，vw是视口宽度。例如1vh<span style="color: black;">暗示</span>视口高度的1%。 </p>vmin是视口宽高的小值，例如vh
<div style="color: black; text-align: left; margin-bottom: 10px;">main {
width: 9em;
</div>
楼主果然英明！不得不赞美你一下！ 软文发布平台 http://www.fok120.com/ 谷歌外链发布 http://www.fok120.com/ 百度seo优化论坛 http://www.fok120.com/
页:
[1]