请问下面代码 p 标签的行高是多少

html
<style>
  body {
    font-size: 20px;
    line-height: 200%;
  }

  p {
    font-size: 16px;
  }
</style>
<p>AAA</p>

居中的方式有很多，我最常用的还是 flexbox：

css
display:flex;
justify-content: center; // 水平居中
align-items: center; // 垂直居中

另外常见的还有：

1. text-align: center
2. line-height 和 height 设置成一样的高度
3. margin: auto 0
4. 绝对定位 + margin 负值
5. 绝对定位 + transform 负值
6. display: grid; place-items: center

答：CSS 中总共有 5 种定位方式，它们分别是：

1. Static Position：静态定位
2. Relative Position：相对定位
3. Absolute Position：绝对定位
4. Fixed Position：固定定位
5. Sticky Position：粘性定位

前言

关于 Flex 布局的知识，推荐直接看阮一峰老师的这篇文章，下面直接上代码

原理：css 画三角形的原理就是通过 border 画的，因为在 css 中 border 并不是一个矩形，而是一个梯形，在 box 的内容越来越小时，border 的一条底边也会越来越小，直到 box 的宽高都是 0 时，此时的四条 border 就组成了四个三角形，将其他三个隐藏，就能得到一个三角形。

css
<style>
  .box {
    /* 内部大小 */
    width: 0px;
    height: 0px;
    /* 边框大小 只设置两条边*/
    border-top: #4285f4 solid;
    border-right: transparent solid;
    border-width: 85px;
    /* 其他设置 */
    margin: 50px;
  }
</style>
<div class="box"></div>

效果：