219mze 发表于 2024-6-30 05:58:26

css水平垂直居中办法


    <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>水平垂直居中的<span style="color: black;">办法</span>：</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">1、</span>父元素定宽定高</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"> (1)块级元素</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;">1、</span>子元素position:relative;top:50%;left:50%;transform:translate(-50%,-50%);<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>这个<span style="color: black;">办法</span>兼容性较差。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</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;">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;">-50</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>
    <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;">2、</span>绝对定位居中，子元素position:absolute;left:0;right:0;top:0;bottom:0;margin:auto；父元素position:relative;兼容性较好。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</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;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</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;">left</span><span style="color: black;">:</span><span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">right</span><span style="color: black;">:</span><span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">top</span><span style="color: black;">:</span><span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">bottom</span><span style="color: black;">:</span><span style="color: black;">0</span><span style="color: black;">;</span>
      <span style="color: black;">margin</span><span style="color: black;">:</span><span style="color: black;">auto</span><span style="color: black;">;</span>
    </div>
    <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;">3、</span>父元素display: flex;justify-content: center;align-items: center;移动端页面经常用。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</span><span style="color: black;">;</span>
      <span style="color: black;">display</span><span style="color: black;">:</span> <span style="color: black;">flex</span><span style="color: black;">;</span>
      <span style="color: black;">justify-content</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>
      <span style="color: black;">align-items</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">办法</span>四：利用伪元素,让子元素display：inline-block；vertical-align: middle;，再让父元素的伪元素height: 100%;display: inline-block;vertical-align: middle;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">text-align</span><span style="color: black;">:</span><span style="color: black;">center</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">200</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</span><span style="color: black;">;</span>
      <span style="color: black;">display</span><span style="color: black;">:</span><span style="color: black;">inline</span><span style="color: black;">-</span><span style="color: black;">block</span><span style="color: black;">;</span>
      <span style="color: black;">vertical-align</span><span style="color: black;">:</span> <span style="color: black;">middle</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">::</span><span style="color: black;">before</span> <span style="color: black;">{</span>
      <span style="color: black;">content</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;">%</span><span style="color: black;">;</span>
      <span style="color: black;">display</span><span style="color: black;">:</span> <span style="color: black;">inline</span><span style="color: black;">-</span><span style="color: black;">block</span><span style="color: black;">;</span>
      <span style="color: black;">vertical-align</span><span style="color: black;">:</span> <span style="color: black;">middle</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">（2）内联元素</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;">1、</span>跟上面的display：flex<span style="color: black;">办法</span><span style="color: black;">同样</span>，<span style="color: black;">运用</span>flex<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;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">display</span><span style="color: black;">:</span> <span style="color: black;">flex</span><span style="color: black;">;</span>
      <span style="color: black;">justify-content</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>
      <span style="color: black;">align-items</span><span style="color: black;">:</span> <span style="color: black;">center</span><span style="color: black;">;</span>

      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <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;">2、</span>父元素用text-align:center;水平居中，子元素用line-height: 父元素的高度;垂直居中，这个经常用，个人觉得是除flex外最好的<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>多行就<span style="color: black;">不可</span>用了。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">.</span><span style="color: black;">parent</span><span style="color: black;">{</span>
      <span style="color: black;">width</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">height</span><span style="color: black;">:</span><span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">red</span><span style="color: black;">;</span>
      <span style="color: black;">text-align</span><span style="color: black;">:</span><span style="color: black;">center</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">bac<span style="color: black;">公斤</span>round</span><span style="color: black;">:</span><span style="color: black;">yellow</span><span style="color: black;">;</span>
      <span style="color: black;">line-height</span><span style="color: black;">:</span> <span style="color: black;">400</span><span style="color: black;">px</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
    </div>
    <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;">3、</span>父元素display:table-cell;text-align: center;vert</p>




qxdl12345 发表于 2024-9-4 14:35:40

你说得对，我们一起加油，未来可期。

b1gc8v 发表于 2024-10-9 01:04:29

谷歌外链发布 http://www.fok120.com/

qzmjef 发表于 2024-10-12 17:50:36

外链发布论坛学习网络优化SEO。
页: [1]
查看完整版本: css水平垂直居中办法