论坛 › 陕西 › css-水平居中、垂直居中、水平垂直居中办法

5ep9lzv 发表于 2024-6-30 05:52:19

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>？ </p>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.文字水平垂直居中代码片段</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- html部分 --&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;">"center"</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>/* css部分 */
      .center{
      text-align: center;
      width: 300px;
      height: 200px;
      bac<span style="color: black;">公斤</span>round: indianred;
      line-height: 200px;
      }
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2.行内元素水平居中</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;">//html部分：
      <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;">"center"</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>/* css部分 */
      .center{
      text-align: center;
      }
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">3.块级元素水平居中</h3>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.定宽元素水平居中</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">只需给<span style="color: black;">必须</span>局中的块级元素加margin：0 auto，</p>但<span style="color: black;">这儿</span><span style="color: black;">必须</span><span style="color: black;">重视</span>的是，<span style="color: black;">这儿</span>的块元素的宽度width值要有
    <div style="color: black; text-align: left; margin-bottom: 10px;">html部分
      <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;">"center"</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>
      css部分
      .center{
      width:200px;
      magin: 0 auto;
      border:1px solid red;
      }
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.2.不定宽块级元素水平居中</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">不定宽，<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>1：设置table，<span style="color: black;">经过</span>给要居中<span style="color: black;">表示</span>的元素，</p>设置display：table，<span style="color: black;">而后</span>设置margin：0 auto来实现
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- html部分 --&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;">"center"</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>/* css部分 */
      .center{
      display: table;
      margin: 0 auto;
      border: 1px solid red;
      }
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.3.设置inlie-block（多个块元素）</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">子元素设置inline-block,<span style="color: black;">同期</span>父元素设置text-align：center</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- html部分 --&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;">"center"</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;">"inlineblock-div"</span><span style="color: black;">&gt;</span>1<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;">class</span><span style="color: black;">=</span><span style="color: black;">"inlineblock-div"</span><span style="color: black;">&gt;</span>2<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>/* css部分 */
      .center{
      text-align: center;
      }
      .inlineblock-div{
      display: inline-block;
      }
    </div>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">1.4.设置flex布局</h3>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">只需把要处理的块元素的父级设置display：flex，justify-content：center；</p>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- html部分 --&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;">"center"</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;">"flex-div"</span><span style="color: black;">&gt;</span>1<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;">class</span><span style="color: black;">=</span><span style="color: black;">"flex-div"</span><span style="color: black;">&gt;</span>2<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>/* css部分 */
      .center{
      display: flex;
      justify-content: center;
      }
    </div>
    <h2 style="color: black; text-align: left; margin-bottom: 10px;">2.垂直居中</h2>
    <h3 style="color: black; text-align: left; margin-bottom: 10px;">2.1单行文本垂直居中</h3>
    <div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">&lt;!-- html部分<span style="color: black;">方法</span>一 --&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;">"center"</span><span style="color: black;">&gt;</span>
      123
      <span style="color: black;">&lt;/</span><span style="color: black;">div</span><span style="color: black;">&gt;</span>/* css部分<span style="color: black;">方法</span>一 */
      .center{
      padding-top:50px;
      padding-bottom:50px;
      bac<span style="color: black;">公斤</span>round: indianred;
      }<span style="color: black;">&lt;!-- html部分<span style="color: black;">方法</span>二 --&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;">"center"</span><span style="color: black;">&gt;</span>1
    </div>

j8typz 发表于 2024-9-27 18:42:11

外贸B2B平台有哪些？

7wu1wm0 发表于 2024-10-11 02:17:49

“BS”（鄙视的缩写）‌

7wu1wm0 发表于 2024-10-14 07:58:27

你说得对，我们一起加油，未来可期。

j8typz 发表于 3 天前

你的见解独到，让我受益匪浅，非常感谢。

查看完整版本: css-水平居中、垂直居中、水平垂直居中办法