如何使用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屬性使文本水平居中。