[分享]css中如何让边框内的文字居中

在 CSS 中，我们可以使用各种技巧来让边框内的文字居中。以下是一些方法。

/* 方法一：使用 text-align 属性 */
.box{
   border: 1px solid #ccc;
   text-align: center; /*让边框内的文字居中*/
}

/* 方法二：使用 line-height 属性 */
.box{
   border: 1px solid #ccc;
   line-height: 100px; /*边框高度为 100px，文字会在中心处*/
}

/* 方法三：使用 flex 属性 */
.parent{
   display: flex;
   justify-content: center;
   align-items: center;
   /*让子元素在水平和垂直方向上都居中*/
}

/* 方法四：使用 absolute 定位 */
.box{
   border: 1px solid #ccc;
   position: relative;
}

.box p{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   /*让文字在中心处*/
}