Biegral Blog

html

<div class="center-flex">
  <p>lesson 1. </p>
  <p>（每行都水平居中）</p>
  <p>1、Be honest rather clever.</p>
  <p>2、Believe not all that you see nor half what you hear.</p>
</div>

<div class="center-flex">
  <div id="box">
    <p>lesson 1. </p>
    <p>(外框居中, 框内不受影响)</p>    
    <p>1、Be honest rather clever.</p>
    <p>2、Believe not all that you see nor half what you hear.</p>
  </div>
</div>

.center-flex {
  height: 240px;
  display: flex;
  /*下面1行元素由上向下排*/
  flex-direction: column;
  /*下面1行实现垂直居中*/
  justify-content: center;
  /*下面1行实现水平居中*/
  align-items: center;
  border: 2px dashed #f69c55;
}

p {
  background-color: yellow;  
  /*下面1行缩小P的行间距*/  
  margin:0.2em 0;    
}