css中已知宽高的子元素水平垂直居中的三种方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mutouafangzi/article/details/76696052

元素水平垂直居中三种的方法

  • 设置两个盒子,关系是父与子:

    <body>
        <div id="wrap">
            <div id="inner">
                inner
            </div>
        </div>
    </body>
  • 方法一:

    • 将父元素的width和height设置的和子元素的大小一样,然后设置父元素wrap的padding。此时padding会将子元素挤进父元素的中间位置;
    • 此时父、子元素的定位是否开启都可以;
      *{
          margin: 0;
          padding: 0;
      }
      
      #wrap{
      
          width: 100px;
          height: 100px;
          /*将padding设置,来挤出来居中的样子;但是要注意的是,此时的width和height要和子元素的大小一样,否则还是不居中*/
          padding: 100px;
          border: 1px solid;
          margin: 100px auto;
      }
      
      #inner{
      
          width: 100px;
          height: 100px;
          background: pink;
          line-height: 100px;
          text-align: center;
      }   
  • 方法二:

    • 父元素相对定位,子元素绝对定位;
    • 绝对定位盒子模型有个特点:left+right+width+padding+margin=包含块的宽度;所以此时可以将left、right(默认值为auto,所以需要重设置)设置为0,而padding已经确定(未设置时默认值为0px),所以剩下的都是margin,但是margin的默认值是0px。所以就将magin设为auto,使得元素自动居中了;
    • 即:left、right、top、bottom为0;margin为auto;
      *{margin: 0;padding: 0;}
      
      #wrap{
      
          position: relative;
          width: 200px;
          height: 200px;
          /*padding: 100px;*/
          border: 1px solid;
          margin: 100px auto;
      }
      
      #inner{
      
          position: absolute;
          /*left+right+width+padding+margin=包含块的宽度*/
          /*0 0 100 0 auto =300*/
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          width: 100px;
          height: 100px;
          background: pink;
          line-height: 100px;
          text-align: center;
      }
  • 方法三:

    • 父元素相对定位,子元素绝对定位;
    • 将子元素left和right直接设为50%,相对的是父元素;
    • 然后在使用margin-left和margin-top设为子元素的一半的负数。就是将偏离父元素中心的那段拽回来;
      
      #inner{
      
          position: absolute;
          left: 50%;
          top: 50%;
          margin-left: -50px;
          margin-top: -50px;
          width: 100px;
          height: 100px;
          background: pink;
          line-height: 100px;
          text-align: center;
      }

    (待扩充)

展开阅读全文

没有更多推荐了,返回首页