nqkk58 发表于 2024-6-30 05:18:36

CSS布局-垂直居中


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">水平居中比较简单，<span style="color: black;">针对</span>行内元素，对其父元素配置text-align:center；<span style="color: black;">针对</span>块级元素，对其<span style="color: black;">自己</span>应用margin:auto。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">而垂直居中相对则比较麻烦，<span style="color: black;">能够</span>有三种<span style="color: black;">处理</span><span style="color: black;">方法</span></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位居中</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">绝对定位居中<span style="color: black;">需求</span>元素<span style="color: black;">拥有</span>固定的宽度和高度，并且<span style="color: black;">倘若</span>元素超过了视口，超过视口的部分会被裁剪掉！</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">export</span> <span style="color: black;">default</span><span style="color: black;">()</span> <span style="color: black;">=&gt;</span> <span style="color: black;">{</span>
      <span style="color: black;">return</span> <span style="color: black;">(</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">className</span><span style="color: black;">=</span><span style="color: black;">{</span><span style="color: black;">"container"</span><span style="color: black;">}</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">className</span><span style="color: black;">=</span><span style="color: black;">{</span><span style="color: black;">"component"</span><span style="color: black;">}</span><span style="color: black;">&gt;</span>
      <span style="color: black;">Hello</span> <span style="color: black;">Friends</span><span style="color: black;">!</span>
      <span style="color: black;">&lt;</span><span style="color: black;">br</span><span style="color: black;">/&gt;</span>
      <span style="color: black;"><span style="color: black;">伴侣</span>们</span><span style="color: black;">,</span><span style="color: black;">你们好呀</span><span style="color: black;">!</span>
      <span style="color: black;">&lt;</span><span style="color: black;">/div&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">/div&gt;</span>
      <span style="color: black;">)</span>
      <span style="color: black;">};</span>

      <span style="color: black;">.</span><span style="color: black;">container</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span><span style="color: black;">:</span> <span style="color: black;">relative</span><span style="color: black;">;</span>
      <span style="color: black;">width</span> <span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">height</span> <span style="color: black;">:</span> <span style="color: black;">100</span><span style="color: black;">vh</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>

      <span style="color: black;">.</span><span style="color: black;">component</span> <span style="color: black;">{</span>
      <span style="color: black;">position</span> <span style="color: black;">:</span> <span style="color: black;">absolute</span><span style="color: black;">;</span>
      <span style="color: black;">top</span> <span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">left</span> <span style="color: black;">:</span> <span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">;</span>
      <span style="color: black;">transform</span><span style="color: black;">:</span> <span style="color: black;">translate</span><span style="color: black;">(</span><span style="color: black;">-</span><span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">,</span> <span style="color: black;">-</span><span style="color: black;">50</span><span style="color: black;">%</span><span style="color: black;">);</span>
      <span style="color: black;">}</span>
    </div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">视口移位居中</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">仅适用于视口居中！</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">export default() =&gt; {
      return (
      &lt;div className={"container"}&gt;
      &lt;div className={"component"}&gt;
      Hello Friends!
      &lt;br/&gt;
      <span style="color: black;">伴侣</span>们,你们好呀!
      &lt;/div&gt;
      &lt;/div&gt;
      )
      };

      .component {
      text-align: center;
      margin : 50vh auto 0;
      transform : translateY(-50%);
      }
    </div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">Flexbox居中</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">借助flexbox和margin:auto，不仅<span style="color: black;">能够</span>在水平方向上居中，还<span style="color: black;">能够</span>在垂直方向上居中</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">export default() =&gt; {
      return (
      &lt;div className={"container"}&gt;
      &lt;div className={"component"}&gt;
      Hello Friends!
      &lt;br/&gt;
      <span style="color: black;">伴侣</span>们,你们好呀!
      &lt;/div&gt;
      &lt;/div&gt;
      )
      };

      .container {
      display: flex;
      }

      .component {
      margin: 100px auto;
      }
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">借助flexbox的align-items和justify-content</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">export default() =&gt; {
      return (
      &lt;div className={"container"}&gt;
      Hello Friends!
      &lt;br/&gt;
      <span style="color: black;">伴侣</span>们,你们好呀!
      &lt;/div&gt;
      )
      };

      .container {
      display: flex;
      justify-content: center;
      align-items : center;
      }
    </div>




akbchina.cn 发表于 2024-9-25 10:30:59

“沙发”（SF，第一个回帖的人）‌

4zhvml8 发表于 2024-9-27 21:40:59

谢谢、感谢、感恩、辛苦了、有你真好等。

4zhvml8 发表于 2024-10-12 07:10:39

“NB”（牛×的缩写，表示叹为观止）‌

b1gc8v 发表于 2024-10-13 17:14:03

认真阅读了楼主的帖子，非常有益。
页: [1]
查看完整版本: CSS布局-垂直居中