1fy07h 发表于 2024-6-30 09:39:18

实现CSS居中的多种办法


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中在 CSS 中用的<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>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">假设<span style="color: black;">此刻</span>给出这种场景：</p>

    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
      DEMO
      &lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">其中在 class=child 这个 div 中的内容长度是不<span style="color: black;">必定</span>的，<span style="color: black;">此刻</span><span style="color: black;">必须</span>实现这个 div 的居中。</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">水平居中</h2>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.1 display: inline-block</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> text-align: center，</p>这种<span style="color: black;">办法</span><span style="color: black;">能够</span>让 inline/inline-block/inline-table/inline/flex 居中。
    <div style="color: black; text-align: left; margin-bottom: 10px;">.child {
      display:inline-block;
      /*子元素文字会继承居中，<span style="color: black;">因此呢</span>要在上面写上向左边居中*/
      text-align:left;
      }
      .parent {
      text-align:center;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">当有多个 child div 的时候<span style="color: black;">倘若</span>设置 display: inline-block 的时候<span style="color: black;">必须</span><span style="color: black;">重视</span><span style="color: black;">每一个</span> div 之间会有缝隙，这不是什么 bug ，特性<span style="color: black;">便是</span>如此。。</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>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1.去掉 HTML 中的空格。</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>标签段之间的空隙，这个时候只<span style="color: black;">必须</span>去除掉 HTML 之间的空隙就好了。</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>种，只要<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;">&lt;div class="parent"&gt;
      &lt;div class="child"&gt;
      DEMO1&lt;/div
      &gt;&lt;div class="child"&gt;
      DEMO2&lt;/div
      &gt;&lt;div class="child"&gt;
      DEMO3&lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2.<span style="color: black;">运用</span> margin 负值</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>不太适合大规模的<span style="color: black;">运用</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.child {
      margin-right; -5px;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3.<span style="color: black;">运用</span> font-size: 0</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>将父 div 的 font-size 设为0 ，<span style="color: black;">而后</span>记得将子 div 的 font-size 属性设置回来<span style="color: black;">就可</span>。</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
      font-size: 0;
      }
      .chilc {
      font-size: 16px;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">4.<span style="color: black;">运用</span> letter-spacing <span style="color: black;">或</span> word-spacing</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
      letter-spacing: -5px;
      /*<span style="color: black;">或</span>*/
      word-spacing: -5px;
      }
      .chilc {
      letter-spacing: 0;
      /*<span style="color: black;">或</span>*/
      word-spacing: 0;
      }</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.2 display:table</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">table 元素的宽度<span style="color: black;">亦</span>是跟着内容走，居中的时候加上 margin <span style="color: black;">就可</span>。兼容IE8。</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">倘若</span>不设置成table,设置成别的块级元素<span style="color: black;">亦</span><span style="color: black;">能够</span>，<span style="color: black;">然则</span>要强调设置宽度width，<span style="color: black;">否则</span>会拉伸成父元素的宽度。(<span style="color: black;">重视</span>加上 width 这种<span style="color: black;">办法</span>拓展性<span style="color: black;">欠好</span>，<span style="color: black;">倘若</span> child div 里面的内容很长的话可能超过设置的 width 的宽度)</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.child {
      display:table;
      margin:0 auto;
      }</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.3 position: absolute</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">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;">这种<span style="color: black;">办法</span>的优点是居中的元素不会对其他元素产生影响 脱离正常流</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent {
      position:relative;
      }
      .child{
      position:absolute; /*参照物是父容器*/
      left:50%;
      transform:translateX(-50%); /*百分比的参照物是<span style="color: black;">自己</span>*/</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.4 dispaly: flex</h2>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">只兼容IE</p>




m5k1umn 发表于 2024-11-10 07:43:52

软文发布论坛开幕式圆满成功。 http://www.fok120.com
页: [1]
查看完整版本: 实现CSS居中的多种办法