u1jodi1q 发表于 2024-6-30 05:30:47

css 实现水平垂直居中的三种常用办法


    <h2 style="color: black; text-align: left; margin-bottom: 10px;">css 实现水平垂直居中的三种常用<span style="color: black;">办法</span></h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">首要</span>基本结构样式</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;body&gt;
      &lt;div class="box"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;/body&gt;</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">使里面的span元素（粉色圆点）水平垂直居中于其div父元素（淘宝色正方形）</p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">实现的效果图如下：</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-9fa827c9276a8a7d8b7973be1e472f0c_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">下面是常用的三种<span style="color: black;">办法</span>：</h3>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">1.定位</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;style&gt;
      * {
      margin: 0;
      padding: 0;
      }
      .box {
      width: 100px;
      height: 100px;
      bac<span style="color: black;">公斤</span>round: #f40;
      position: relative;
      margin: 200px auto;
      }
      .box span{
      width: 20px;
      height: 20px;
      bac<span style="color: black;">公斤</span>round: pink;
      border-radius: 50%;
      position: absolute;
      left: 50%;
      margin-left: -10px;
      top:50%;
      margin-top: -10px;
      ​
      }
      &lt;/style&gt;</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.flex 设置主轴及侧轴方向居中</h2>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;style&gt;
      * {
      margin: 0;
      padding: 0;
      }
      .box {
      width: 100px;
      height: 100px;
      bac<span style="color: black;">公斤</span>round: #f40;
      margin: 200px auto;
      display: flex;
      justify-content: center;
      align-items: center;
      }
      .box span{
      width: 20px;
      height: 20px;
      bac<span style="color: black;">公斤</span>round: pink;
      border-radius: 50%;
      }
      &lt;/style&gt;</div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">3.最简单，最直接，最牛逼</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">直接在子元素span下设置 margin : auto;<span style="color: black;">就可</span></h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;">&lt;style&gt;
      * {
      margin: 0;
      padding: 0;
      }
      .box {
      width: 100px;
      height: 100px;
      bac<span style="color: black;">公斤</span>round: #f40;
      margin: 200px auto;
      display: flex;
      }
      .box span{
      width: 20px;
      height: 20px;
      bac<span style="color: black;">公斤</span>round: pink;
      border-radius: 50%;
      margin: auto;
      }
      &lt;/style&gt;</div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">总结：</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">以上三种<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>。</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">还有我个人<span style="color: black;">意见</span><span style="color: black;">运用</span>后两种，不<span style="color: black;">意见</span><span style="color: black;">运用</span><span style="color: black;">第1</span>种，后两种简单，采用flex布局，避免用定位。</h3>




j8typz 发表于 2024-10-8 01:18:35

seo常来的论坛，希望我的网站快点收录。

m5k1umn 发表于 2024-10-31 06:58:46

“BS”（鄙视的缩写）‌

4lqedz 发表于 7 天前

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。
页: [1]
查看完整版本: css 实现水平垂直居中的三种常用办法