如何使用CSS将文本放置在边框中？

一、使用padding和text-align实现

<div class="box">
  <p class="content">这是一段示例文本</p>
</div>

.box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  padding: 50px;
  text-align: center;
}
.content {
  display: inline-block;
}

通过设置padding值使文本与边框之间产生间距，使用text-align属性使文本水平居中，在content元素上设置display为inline-block使文本垂直居中。

二、使用flex布局实现

<div class="box">
  <p class="content">这是一段示例文本</p>
</div>

.box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

通过设置display为flex，使用justify-content和align-items分别对齐水平和垂直方向上的元素。

三、使用绝对定位和transform实现

<div class="box">
  <p class="content">这是一段示例文本</p>
</div>

.box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  position: relative;
}
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

通过设置父元素的position为relative，子元素的position为absolute，使用left和top属性将子元素定位于中心位置，使用transform属性使子元素始终居中。

四、使用table和vertical-align实现

<div class="box">
  <p class="content">这是一段示例文本</p>
</div>

.box {
  width: 300px;
  height: 150px;
  border: 1px solid black;
  display: table;
}
.content {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

通过设置父元素的display为table，子元素的display为table-cell，使用vertical-align属性使文本垂直居中，使用text-align属性使文本水平居中。