垂直居中

100 阅读1分钟
  1. display 布局
.box {
  display: flex;
  align-items: center;
}
  1. 定位
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.content {
  width: 300px;
  height: 300px;
  background: orange;
  margin: 0 auto; /*水平居中*/
  position: relative;
  top: 50%; /*偏移*/
  transform: translateY(-50%);
}
  1. 设置子元素的 line-height 值等于父元素的 height,这种方法适用于子元素为单行文本的情况。