常见的居中问题

• 文字,图片在容器居中

  • 设置text-align属性

• 单行文本垂直居中

  • 通过设置line-height

• 块级盒子居中

  • 水平居中margin: 0 auto

  • 垂直居中,有好几种方案

    • 绝对定位和transfrom
    • 用flex,设置align-item为center最方面

• 图片文字居中对齐

  • 通过设置vertical-align:middle

行内元素水平居中：

块级元素水平居中：

定位配合clac实现水平垂直居中：

定位实现水平垂直居中： 当不知道宽高定位配合 transform实现居中： 定位配合子元素加margin，当子元素left ，right ，top ，bottom为0会自动填充父元素所有可用空间。 父元素添加padding实现居中 flex实现居中 伪元素实现居中

calc实现居中 background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。

• border-box

• 背景延伸至边框外沿（但是在边框下层）。

• padding-box

• 背景延伸至内边距（padding）外沿。不会绘制到边框处。

• content-box

• 背景被裁剪至内容区（content box）外沿。

• text 实验性

• 背景被裁剪成文字的前景色。