css中怎么让div垂直居中

CSS中让

垂直居中的方法有多种，以下是几种可行的方法：

方法一：将

设置为表格单元格（display: table-cell）

div {
  display: table-cell;
  vertical-align: middle;
}

css中怎么让div垂直居中

将

的display属性设置为table-cell，用vertical-align属性垂直居中即可。但是这种方法的缺点是必须指定width和height。

div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

将

的position设置为absolute，再用top属性将它向下移动50%的距离，最后用transform属性将它再向上移动50%的距离即可。

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

将父级元素的display设置为flex，用align-items属性将子元素纵向居中，用justify-content属性将子元素横向居中。

.container {
  display: grid;
  place-items: center;
}

同样，将父级元素的display设置为grid，用place-items属性将子元素居中即可。

相关文章