2.任意元素垂直水平居中（多种方法）

书诚小驿2024/10/01前端面经JavaScript

任意元素垂直水平居中（多种方法）

提示

DETAILS

使用 Flex 弹性布局
使用 Grid 网格布局
vertical-align: center;和line-height: height;
子绝父相对定位

答案

DETAILS

使用 Flex 弹性布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 Grid 网格布局

.parent {
  display: grid;
  place-items: center; /* 这是 justify-items: center; 和 align-items: center; 的简写 */
  height: 100vh; /* 或者其他你需要的高度，确保父元素有足够的空间来居中子元素 */
}

vertical-align: center;和line-height: height;

.parent {
  width: 100%;
  height: 100px;
  vertical-align: center;
  line-height: 100px;
}

子绝父相对定位

.parent {
  position: relative;
  height: 100px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

目录