[分享]css中div 水平垂直居中

CSS中实现div的水平垂直居中是一个常见的问题，下面介绍两种方法。方法一： 使用绝对定位和负边距。首先将div设置为绝对定位，然后将其top和left都设置为50，使其水平垂直居中。最后使用负边距将...

CSS中实现div的水平垂直居中是一个常见的问题，下面介绍两种方法。

方法一： 使用绝对定位和负边距。首先将div设置为绝对定位，然后将其top和left都设置为50%，使其水平垂直居中。最后使用负边距将div向上和左移动自身宽高的一半，使其完全居中。

.container {
  position: relative;
}

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

方法二： 使用flex布局。将父元素设置为flex布局，并将align-items和justify-content都设置为center，使子元素居中。

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

以上两种方法都可以实现div的水平垂直居中，具体使用哪种方法可以根据实际情况和个人喜好选择。