居中技巧

自身定位居中

适用于 absolute 和 fixed 的定位的居中方式:

.container
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // transform: translate3d(-50%,-50%,0);

子元素 flex 居中

在 flex 容器中:

.container
  display: flex;
  justify-content: center;
  align-items: center;

块元素自身水平居中

.container
  margin: 0 auto;

块元素内容垂直水平居中

.container
  height: 100px;
  line-height: 100px;
  text-align: center;

垂直方向: height === line-height 即可

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress