论坛 › 山东 › CSS 九种办法实现居中

qzmjef 发表于 2024-6-30 09:34:23

CSS 九种办法实现居中

    <h2 style="color: black; text-align: left; margin-bottom: 10px;">grid 布局</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素<span style="color: black;">运用</span> grid 布局，<span style="color: black;">而后</span>加上align-items:center;justify-items:center;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">px</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;">px</span><span style="color: black;">;</span>
      <span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">grid</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;">justify-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;">green</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"box"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;</span>奥特曼<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">jsbin.com/tasucaruya/ed</span><span style="color: black;">it?html,o</span></a>utput</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素<span style="color: black;">运用</span> grid 布局，给子元素加上margin:auto;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">px</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;">px</span><span style="color: black;">;</span>
      <span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">grid</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;">green</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>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"box"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;</span>奥特曼<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">jsbin.com/yokiwisura/ed</span><span style="color: black;">it?html,output</span></a></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">flex 布局</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素<span style="color: black;">运用</span> flex 布局，<span style="color: black;">而后</span>加上justify-content:center;align-items:center;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">px</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;">px</span><span style="color: black;">;</span>
      <span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">green</span><span style="color: black;">;</span>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"box"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;</span>奥特曼<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">jsbin.com/guyezuzewe/ed</span><span style="color: black;">it?html,output</span></a></p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">父元素<span style="color: black;">运用</span> flex 布局，子元素加上margin:auto</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">px</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;">px</span><span style="color: black;">;</span>
      <span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">}</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;">green</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>
      <span style="color: black;">}</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"box"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;</span>奥特曼<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">jsbin.com/gowokagiko/ed</span><span style="color: black;">it?html,output</span></a></p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">绝对定位</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>一</h3>
    <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>给子元素加上left:50%;top:50%;transform:translate(-50%,-50%)</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">px</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;">px</span><span style="color: black;">;</span>
      <span style="color: black;">border</span><span style="color: black;">:</span><span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">}</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;">green</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;">50</span><span style="color: black;">%</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;">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>
      <span style="color: black;">&lt;/</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>

      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"box"</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;</span><span style="color: black;">div</span> <span style="color: black;">class</span><span style="color: black;">=</span><span style="color: black;">"child"</span><span style="color: black;">&gt;</span>奥特曼<span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>
    </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">https://</span><span style="color: black;">jsbin.com/tezenomobe/ed</span><span style="color: black;">it?html,output</span></a></p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">办法</span>二</h3>
    <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>left:50%;top:50%;，在<span style="color: black;">运用</span>这种<span style="color: black;">办法</span>时最好写死子元素的宽高，<span style="color: black;">这般</span>能更准确的居中。<span style="color: black;">而后</span>加上marginleft:-1/2width;margin-top:-1/2height;</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;</span><span style="color: black;">style</span><span style="color: black;">&gt;</span>
      <span style="color: black;">.</span><span style="color: black;">box</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;">border</span><span style="color: black;">:</span> <span style="color: black;">1</span><span style="color: black;">px</span> <span style="color: black;">solid</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;">}</span>
      <span style="color: black;">.</span><span style="color: black;">child</span><span style="color: black;">{</span>
      <span style="color: black;">border</span><span style="color: black;">:</span>
    </div>

星☆雨 发表于 2024-8-23 11:11:30

外贸论坛是我们的，责任是我们的，荣誉是我们的，成就是我们的，辉煌是我们的。

查看完整版本: CSS 九种办法实现居中