1. fit-content属性介绍
fit-content是CSS3新增的一个属性，它可以根据元素的内容自动调整其宽度或高度。这个属性的作用非常强大，特别是在响应式布局中需要根据内容自动调整大小的时候，可以大大减少开发工作量。
具体来说，fit-content属性是一个非常强的计算属性，可以基于元素的内容和内边距来计算它的大小。这个属性在自适应布局中特别有用，因为它可以避免使用JavaScript代码手动计算元素的大小，而且可以充分发挥CSS的自动化布局功能。
2. 如何使用fit-content实现水平居中
2.1 使用margin实现水平居中
想要实现水平居中，最简单的方法就是给元素设置一个固定宽度，并在左右两侧各设置一个相等的外边距。然后，我们可以使用 CSS3 的 fit-content 属性，将元素的宽度设置为其内容的最小值。这样一来，我们就可以实现一个基于内容自适应大小的元素，并且可以通过设置外边距来使其水平居中。
.box{
width:fit-content;
margin:0 auto;
}
其中，margin:0 auto;表示在水平方向上自动居中。这种方法非常适用于单行文本或内联元素的水平居中。但是，它对于多行文本或块级元素的水平居中则不是很理想，因为它并不能准确计算出元素的宽度。
2.2 使用flexbox实现水平居中
另一种方法是使用 flexbox 布局，可以更容易地实现元素的水平或垂直居中。这种方法充分利用了flex容器自动分配空间的特性，可以实现不同大小和数量的元素之间的快速布局。
使用flexbox实现水平居中的代码如下：
.container{
display:flex;
justify-content:center;
}
.box{
width:fit-content;
}
其中，.container是一个flex容器，使用display:flex;命令将其设为flex容器。而justify-content:center;命令则表示在水平方向上居中，这样我们就可以将容器内的元素水平居中。
3. fit-content属性的兼容性问题
虽然fit-content属性是CSS3中的新特性，但是它的兼容性并不太好。在IE浏览器以及一些旧版本的Android系统中并不支持。因此，在使用fit-content属性的时候，我们需要考虑到浏览器的兼容性问题，并对不支持的浏览器使用其他的兼容方案。
4. 总结
fit-content属性可以帮助我们实现基于内容自适应大小的元素，并且可以通过设置外边距来实现水平居中。虽然它的兼容性不太好，但是在现代浏览器中已经得到了广泛的应用和支持。因此，对于需要实现自适应布局的开发者来说，fit-content是一个非常有用的属性。