css垂直居中的多种方法

发布时间:2022-01-16 02:25:27 作者:路人甲 阅读(95)

为了方便大家简单易懂,这里只写核心代码

先看看html页面

  1. <div class="center">
  2. <span></span>
  3. <div>

第一种方式,需要将父标签都设置高宽100%

  1. .center{
  2. display:inline-flex;
  3. align-items:center;
  4. }

第二种,需要将父标签都设置高宽100%

  1. .center{
  2. display:flex;
  3. }
  4. .center span{
  5. margin:auto auto;
  6. }

第三种,使用绝对定位

  1. .center{
  2. position: fixed;
  3. top: 50%;
  4. left: 50%;
  5. }

关键字前端