css实现元素水平竖直居中

父级容器

.container {
  position: relative;
  width: 100%;
  height: 100vh; /* 设置容器高度为视窗高度，实现垂直居中 */
}

子内容

.centered-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用 transform 属性进行水平垂直居中 */
  /* 可选：设置内容的样式 */
}

/* 
position使元素脱离正常文档流
top: 50% 和 left: 50% 将元素的左上角定位在父容器的中心点位置
使用 transform: translate(-50%, -50%) 来调整元素的位置，使其向左和向上移动自身宽度和高度的一半，从而实现水平和垂直居中
*/