一天一题:垂直水平居中的实现方式有哪些?

115 阅读1分钟

垂直水平居中的实现方式有哪些?

  • 父级设置text-align: centerline-height等同高度。
  • 子节点绝对定位,设置position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
  • 子节点绝对定位,需要设置宽度和高度。设置position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;
  • 父级设置display: table,子节点设置display:table-cell;text-align:center;vertical-align:middle;
  • 父级设置display: flex;justify-content:center;align-items:center;
  • 父节点设置display: grid;,子节点设置:align-self:center;justify-self: center;