块级元素上下左右居中的两个小技巧

最新推荐文章于 2023-10-30 20:10:04 发布

庸懒

最新推荐文章于 2023-10-30 20:10:04 发布

阅读量2k

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/qq_45279180/article/details/111844964

版权

笔记专栏收录该内容

39 篇文章 8 订阅

订阅专栏

块级元素的居中

之前写居中一般都是margin:atuto要么就是弹性盒子，不得不说弹性盒子确实好用。不过今天就记录一下另外两种的居中方式。

第一种

我们都知道元素居中有一种方式就是设置定位后left:50%然后transform:translateX(-50%)，这种方法也是比较常用的一种。但是今天讲的居中方式和这个有点出入但是更简单。

<style>
    .big{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      position: relative;
      margin: auto;
    }
    .small{
      width: 100px;
      height: 100px;
      background-color: deeppink;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="small"></div>
  </div>

效果图如下：
在这里插入图片描述
可以看到我的大盒子的居中是使用的margin:auto，小盒子也是margin:auto，那为什么一个是左右居中另外一个就是上下左右都居中呢。
原因就是margin:auto居中的原理，因为margin:auto是根据元素的流来的，在上面的例子中大盒子是一个标准的块级元素，所以他的宽度默认是百分百的。
虽然大盒子看起来只有我设置的那么宽，但是他的流还是默认百分之百，所以我设置了margin:auto之后它就会居中。
那么小盒子也是同理，在定位之后我给了上下左右都为0，这样就会将小盒子的流拉伸至大盒子的大小，这个时候我给小盒子设置margin:auto就会让小盒子上下左右以大盒子为标准都居中。

第二种

第二种方式其实也用到了弹性盒子，但是比你设置主轴和副轴居中来的更为直接。
代码如下：

 <style>
    .big{
      width: 300px;
      height: 300px;
      border: 1px solid red;
      display: flex;
      margin: auto;
    }
    .small{
      width: 100px;
      height: 100px;
      background-color: deeppink;
      margin: auto;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="small"></div>
  </div>

这里的效果图和上面的一样我就不做演示了，我直接在这里说一下原因。
当元素设置了弹性盒子之后他的子元素自动变为块级元素，而该元素的副轴会被拉伸，所以呈现的效果和上面的一样。