[分享]css不定宽高居中黑魔法

CSS不定宽高居中是前端开发中一个重要的黑魔法。在许多情况下，我们需要将一个元素水平居中于其容器中，即使它的宽度和高度是动态变化的。以下是一些有用的技巧和技术来实现这个目标。 //方法一：使用flex...

CSS不定宽高居中是前端开发中一个重要的黑魔法。在许多情况下，我们需要将一个元素水平居中于其容器中，即使它的宽度和高度是动态变化的。以下是一些有用的技巧和技术来实现这个目标。

//方法一：使用flexbox
.container {
   display: flex;
   justify-content: center;
   align-items: center;
}

//方法二：使用position和transform
.container {
   position: relative;
}

.child {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

//方法三：使用display: inline-block和text-center
.container {
   text-align: center;
}

.child {
   display: inline-block;
} 

这些方法中，使用flexbox是最现代化和标准化的。但是，它可能不适用于旧版本的浏览器。使用position和transform的方法也很有效，但是需要知道子元素的宽度和高度。最后，使用display: inline-block和text-center的方法可以使元素水平居中，但是它不适用于垂直居中。

总之，了解这些技术和技巧可以帮助我们更好地处理CSS布局，尤其是在需要不定宽高元素水平居中的场景下。