nqkk58 发表于 2024-6-30 05:25:54

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;
      }

      &lt;body&gt;
      &lt;main&gt;
      &lt;div&gt;用flex实现&lt;/div&gt;
      &lt;p&gt;垂直居中&lt;/p&gt;
      &lt;/main&gt;
      &lt;/body&gt;</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%);
      …
      }
      &lt;main&gt;
      &lt;div&gt;用absolute实现&lt;/div&gt;
      &lt;p&gt;垂直居中&lt;/p&gt;
      &lt;/main&gt;</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>




流星的美 发表于 2024-8-26 16:36:51

楼主果然英明！不得不赞美你一下！

mugong 发表于 2024-9-6 12:13:07

软文发布平台 http://www.fok120.com/

j8typz 发表于 2024-10-10 05:13:50

谷歌外链发布 http://www.fok120.com/
页: [1]
查看完整版本: CSS3 垂直居中实现办法