b1gc8v 发表于 2024-6-30 05:33:14

CSS实现水平垂直居中的10种方式


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">仅居中元素定宽高适用</p>absolute + 负marginabsolute + margin autoabsolute + calc<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">居中元素不定宽高</p>absolute + transformlineheightwriting-modetablecss-tableflexgrid<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">为了实现上面的效果先来做些准备工作，假设HTML代码如下，总共两个元素，父元素和子元素</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;div class="wp"&gt;
      &lt;div class="box size"&gt;123123&lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">wp是父元素的类名，box是子元素的类名，<span style="color: black;">由于</span>有定宽和不定宽的区别，size用来<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;">/* 公共代码 */
      .wp {
      border: 1px solid red;
      width: 300px;
      height: 300px;
      }

      .box {
      bac<span style="color: black;">公斤</span>round: green;
      }

      .box.size{
      width: 100px;
      height: 100px;
      }
      /* 公共代码 */</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">absolute + 负margin</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>让子元素的居中<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>借助外边距的负值，负的外边距<span style="color: black;">能够</span>让元素向相反方向定位，<span style="color: black;">经过</span>指定子元素的外边距为子元素宽度一半的负值，就<span style="color: black;">能够</span>让子元素居中了，css代码如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">/* 此处引用上面的公共代码 */
      /* 此处引用上面的公共代码 */

      /* 定位代码 */
      .wp {
      position: relative;
      }
      .box {
      position: absolute;;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
      }</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;">必须</span><span style="color: black;">晓得</span>子元素的宽高</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">absolute + margin auto</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>固定，HTML代码如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;div class="wp"&gt;
      &lt;div class="box size"&gt;123123&lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这种方式<span style="color: black;">经过</span>设置各个方向的距离都是0，此时再讲margin设为auto，就<span style="color: black;">能够</span>在各个方向上居中了</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">/* 此处引用上面的公共代码 */
      /* 此处引用上面的公共代码 */

      /* 定位代码 */
      .wp {
      position: relative;
      }
      .box {
      position: absolute;;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      }</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;">亦</span>很好，缺点是<span style="color: black;">必须</span><span style="color: black;">晓得</span>子元素的宽高</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">absolute + calc</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>固定，<span style="color: black;">因此</span><span style="color: black;">咱们</span>为box<span style="color: black;">增多</span>size类，HTML代码如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;div class="wp"&gt;
      &lt;div class="box size"&gt;123123&lt;/div&gt;
      &lt;/div&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">既然top的百分比是基于元素的左上角，<span style="color: black;">那样</span>在减去宽度的一半就好了，代码如下</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">/* 此处引用上面的公共代码 */
      /* 此处引用上面的公共代码 */

      /* 定位代码 */
      .wp {
      position: relative;
      }
      .box {
      position: absolute;;
      top: calc(50% - 50px);
      left: calc(50% - 50px);
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">这种<span style="color: black;">办法</span>兼容性依赖calc的兼容性，缺点是<span style="color: black;">必须</span><span style="color: black;">晓得</span>子元素的宽高</p>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">absolute + tran</h2>




情迷布拉格 发表于 2024-8-24 23:09:43

系统提示我验证码错误1500次 ＼~゛，

4zhvml8 发表于 7 天前

你的话语如春风拂面，温暖了我的心房，真的很感谢。
页: [1]
查看完整版本: CSS实现水平垂直居中的10种方式