元素的水平和垂直居中解决方案

最新推荐文章于 2024-10-17 17:03:17 发布

@大熊

最新推荐文章于 2024-10-17 17:03:17 发布

阅读量113

点赞数

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_51558433/article/details/125762046

版权

水平居中

行内级元素

设置父元素的text-align:center

块级元素

设置当前块级元素（宽度）margin:0 auto

绝对定位

元素有宽度的情况下，设置left:0,right:0,margin:0 auto

  <style>
      .box {
        position: relative;
        background-color: #faa;
        height: 100px;
      }
      .d1 {
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 50px;
        height: 50px;
        background-color: #f00;
      }
    </style>
  <body>
    <div class="box">
      <div class="d1"></div>
    </div>
  </body>

flex

justify-content:center

垂直居中

绝对定位

元素有宽度的情况下，设置top:0,bottom:0,margin: auto 0

flex

align-items:center

transform-translate

    <style>
      .box {
        background-color: #faa;
        height: 100px;
      }
      .d1 {
      /*相对定位不会脱离标准流 */
        position: relative;
        top: 50%;
        width: 50px;
        height: 50px;
        background-color: #f00;
        transform: translateY(-50%);
      }
    </style>
  <body>
    <div class="box">
      <div class="d1"></div>
    </div>
  </body>