css下边框线居中

当我们需要在网页中为一个元素添加下边框线时，经常会有这样的需求：让下边框线居中显示，而不是与元素的底部对齐。那么，该如何实现呢？

box {
  border-bottom: 2px solid #000;
  display: inline-block; /* 一定要加上这句 */
  line-height: 1; /* 让行高与元素高度相等 */
  padding-bottom: 3px; /* 留出一定的空间给下边框 */
} 

如上述代码所示，要让下边框线居中，我们需要将元素的display属性设置为inline-block，然后再让元素的行高line-height与高度相等，这样就可以让下边框线居中显示了。

另外，我们也可以通过在元素底部添加一定的padding来让下边框线居中。不过，这种方法需要根据实际情况进行调整，否则可能会出现下边框线不居中的情况。