image.png
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>
css
.center-flex {
height: 240px;
display: flex;
/*下面1行元素由上向下排*/
flex-direction: column;
/*下面1行实现垂直居中*/
justify-content: center;
/*下面1行实现水平居中*/
align-items: center;
/*下面一行实现自动适应*/
justify-content:space-between;
border: 2px dashed #f69c55;
}
p {
background-color: yellow;
/*下面1行缩小P的行间距*/
margin:0.2em 0;
}
作者：chelen_jak
来源：CSDN
原文：https://blog.csdn.net/chelen_jak/article/details/79715193
版权声明：本文为博主原创文章，转载请附上博文链接！
