CSS: 我常用到的一些居中方法

博客介绍了网页元素居中的多种方法,包括普通行高居中用line-height和text-align;块状元素水平居中用margin:0 auto;flex布局居中、绝对定位居中;高度不确定时用transform;图像内容垂直水平居中可使用img本身属性或背景图片形式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

  1. 普通行高居中,使用line-height, text-align
    <div class="tx">text</div>
    .tx {
      line-height: 40px; /* 文本垂直居中 */ 
      text-align: center; /* 文本水平居中 */
    }

     

  2. 块状元素水平居中,使用margin:0 auto;
    <img class="img"/>
    .img {
      display: block;
      width: 40px;
      height: 40px;
      margin-left: auto;
      margin-right: auto;
    }

     

  3. flex布局居中
    <div class="flex-box">
      <div class="flex-item"></div>
      <div class="flex-item"></div>
    </div>
    .flex-box {
      display: flex; /* 水平方向,弹性布局 */ 
      align-items: center; /* 垂直居中 */
      justify-content: center; /* 水平居中 */
    }
    .flex-box {
      display: flex; 
      flex-direction: column; /* 垂直方向,弹性布局 */ 
      align-items: center; /* 水平居中 */
      justify-content: center; /* 垂直居中 */
    }

     

  4.  使用绝对定位居中
    <div class="pos-r">
      <div class="label">
      </div>
    </div>
    /*
    * 假设.pos-r 行高100px
    * .label 行高20px, 宽度20px
    * .label 作为一个标签需要显示在右边且垂直居中
    */
    .pos-r {
      position: relative;
      height: 100px;
    }
    
    .pos-r .label {
        width: 20px;
        height: 20px;
        margin-top: -10px; /* 自动减去.label高度的一半 */
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 100; 
    }

    如果高度不确定,则使用transform
     

    /*
    * 假设.pos-r 行高100px
    * .label 行高20px, 宽度20px
    * .label 作为一个标签需要显示在右边且垂直居中
    */
    .pos-r {
      position: relative;
      height: 100px;
    }
    
    .pos-r .label {
        width: 20px;
        height: 20px;
        position: absolute;
        right: 0;
        top: 50%;
        z-index: 100; 
        transform: translateY(-50%); /* 向上偏移自身50% */
    }
  5. 图像内容显示的垂直水平居中
    (1)使用img本身属性

    <img class="img" src="..."/>
    .img {
      object-fit: contain; /* 如果图像比例与容器不符,则等比进行缩放 */
      object-position: center; /* 图片内容居中 */
    }

     (2)使用背景图片的形式

    <div class="img"></div>
    .img {
      width: 40px;
      height: 40px;
      background-image: url("http://abc");
      background-repeat:no-repeat;
      background-size: contain;
      background-position: center;
    }

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值