A 元素垂直居中于屏幕中央 A 元素距离屏幕左右边距各 10px A 元素里面的文字大小为 20px，并且水平垂直居中 A 元素的高度始终是 A 元素宽度的 50%

image.png

实现一

  • position + transform 实现水平垂直居中（居中详解）
  • padidng-top 实现高是宽的 50%
  • left + right 设置边距

演示 demo

当给 padding 设置百分比的时候，是相对于父元素的宽度（margin 也是）

实现二

  • position + transform 实现水平垂直居中
  • calc + vw 实现高是宽的 50% 和 文字居中（css 中的单位）

演示 demo

实现三

  • flex 实现水平垂直居中
  • padidng-top 实现高是宽的 50%
  • 伪元素实现文字居中

演示 demo