文字少的時候居中顯示，文字超過一行的時候居左顯示

html

<div class="box">
    <p>這是一段文字</p>
</div>

css

.box {
  margin: 20px auto;
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
  width: 200px;
}
.box > p {
  display: inline-block;
  text-align: left;
}

效果