关于水平垂直居中问题

最新推荐文章于 2024-12-08 00:31:00 发布

原创最新推荐文章于 2024-12-08 00:31:00 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css实现水平垂直居中 #图片的水平垂直居中 #div的水平垂直居中 #水平垂直居中的两种方式

web前端专栏收录该内容

66 篇文章

订阅专栏

本文深入讲解了网页布局中常见的水平垂直居中技巧，包括固定宽度和未知宽度元素的精确定位方法，以及如何利用CSS属性实现图片的完美居中。通过不同场景下的案例演示，帮助读者掌握灵活运用CSS定位及变换属性。

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

关于水平垂直居中问题

一 div 已知宽度水平垂直居中

(1) position:absolute tlrb = 0 margin :auto

  div{
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom: 0;
      margin: auto;
      width: 200px;
      height:200px;
      background: pink;
    }

原理：利用绝对定位盒子的特性

left + right + width +padding +margin = 包含块的宽度

top + bottom + height + padding +margin = 包含块的高度

(2) position:absolute t l :50% m-t m-l 为负值（自身的一半）

div{
      position: absolute;
      top:50%;
      left:50%;
      margin-left: -150px;
      margin-top: -150px;
      width: 300px;
      height: 300px;
      background: deeppink;
    }

未知宽度水平垂直居中

position:absoulte t l :50% transform

  div{
      position: absolute;
      top:50%;
      left:50%;
      transform: translate3d(-50% ,-50% , 0);
      background: black;
    }

二图片的水平垂直居中

利用 vertical-align

  div:after{
      content: "";
      display: inline-block;
      height:100%;
      width: 0;
      vertical-align: middle;
    }
    img{
      vertical-align: middle;
    }