Flex 垂直、水平居中

最新推荐文章于 2024-07-19 14:29:49 发布

chelen_jak

最新推荐文章于 2024-07-19 14:29:49 发布

阅读量1.5k

点赞数

分类专栏： CSS 实用

本文链接：https://blog.csdn.net/chelen_jak/article/details/79715193

版权

实用同时被 2 个专栏收录

738 篇文章 4 订阅

订阅专栏

CSS

191 篇文章 0 订阅

订阅专栏

先上效果图

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>

css

.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;    
}

原理：
我是容器，我要将里面的元素按垂直居中、水平居中来进行放置；