7wu1wm0 发表于 2024-6-30 09:46:41

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>到css 的居中布局，不论是移动端还是<span style="color: black;">咱们</span>的pc端，今天总结归纳几种css居中布局的<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;"> 1： 水平居中<span style="color: black;">办法</span> ：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-3792c9b8ecad1d53c04b145bfbb7182e_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <div style="color: black; text-align: left; margin-bottom: 10px;">css代码一：
      .parent{
      text-align: center;
      width: 500px;
      height: 500px;
      margin: 10px auto;
      bac<span style="color: black;">公斤</span>round: #ccc;
      }
      .parent .child{
      display: inline-block;
      padding: 10px;
      bac<span style="color: black;">公斤</span>round: pink;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码二：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
      bac<span style="color: black;">公斤</span>round: #ccc;
      width: 600px;
      height: 600px;
      margin: 20px auto;
      position: relative;
      }
      .parent .child{
      position: absolute;
      left: 50%;
      bac<span style="color: black;">公斤</span>round: pink;
      padding: 10px;
      transform:translateX(-50%);
      }</div>
    <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="parent"&gt;
      &lt;div class="child"&gt;
      我是垂直居中<span style="color: black;">表示</span>
      &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>：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-89055c5cab403d2ee65010b5fd626bb9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码一:</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
      display: table-cell;
      vertical-align: middle;
      width: 500px;
      height: 600px;
      bac<span style="color: black;">公斤</span>round: #ccc;
      }
      .parent .child{
      bac<span style="color: black;">公斤</span>round: pink;
      padding: 10px;
      width: 100px;
      }</div>
    <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="parent"&gt;
      &lt;div class="child"&gt;
      我是垂直居中<span style="color: black;">表示</span>
      &lt;/div&gt;
      &lt;/div&gt; </div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3:垂直水平都居中：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-2a0b25761839bd707854f414e12885ca_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码一：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
      text-align: center;
      bac<span style="color: black;">公斤</span>round: #ccc;
      height: 600px;
      width: 600px;
      display: table-cell;
      vertical-align: middle;
      }
      .parent .child{
      display: inline-block;
      bac<span style="color: black;">公斤</span>round: pink;
      padding: 10px;
      width: 150px;
      height: 150px;
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码二：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
      bac<span style="color: black;">公斤</span>round: #ccc;
      height:400px;
      width: 400px;
      position: relative;
      }
      .child{
      bac<span style="color: black;">公斤</span>round: pink;
      padding: 10px;
      width: 150px;
      height: 150px;
      position: absolute;
      left: 50%;
      top:50%;
      transform: translate(-50%,-50%);
      }</div>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css代码<span style="color: black;">最后</span>版本：</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;">.parent{
      display: flex;
      justify-content: center;
      align-items: center;
      bac<span style="color: black;">公斤</span>round: #ccc;
      height:600px;
      width: 400px；
      }
      .child{
      bac<span style="color: black;">公斤</span>round: pink;
      padding: 10px;
      width: 150px;
      height: 150px;
      }</div>
    <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="parent"&gt;
      &lt;div class="child"&gt;
      我是垂直居中和水平居中<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>
      &lt;/div&gt;
      &lt;/div&gt;</div>




4lqedz 发表于 2024-10-15 07:28:41

谷歌网站排名优化 http://www.fok120.com/

b1gc8v 发表于 2024-10-25 15:12:33

论坛的成果是显著的，但我们不能因为成绩而沾沾自喜。
页: [1]
查看完整版本: css居中布局的几种办法