不固定宽度和高度的情况下CSS调整div居中的方法

1.背景介绍

CSS是网页样式设计中的重要一环，其中div的居中排列是经常用到的布局方式，但是通常情况下，我们要想让div居中，需要限定div的宽度和高度来实现。而如果在不固定宽度和高度的情况下，我们如何调整div居中？本文将为您详细讲解。

2.flex布局方式

2.1 父元素设置display:flex

使用CSS3的flex布局方式，是一种解决不固定宽高情况下div居中的好办法。我们只需要在父元素中设置display:flex属性，再利用align-items和justify-content属性就可以使得div居中。align-items属性决定了flex子项的垂直对齐方式，而justify-content属性是决定子项的水平排列方式。

.parent {
  display: flex;
  align-items: center; /* 垂直剧中 */
  justify-content: center; /* 水平剧中 */
}

2.2 为父元素设置百分比属性

通过给父元素设置宽高为百分比的方式，我们可以让div的大小根据父元素的大小而变化，同时，通过将父元素设置absolute定位，就可以很方便地使div居中了。在这种情况下，需要父元素的position要为relative或者absolute。

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

3.网格布局方式

CSS3的网格布局也能很方便地解决不固定宽高情况下div的居中问题。通过grid布局，我们将父元素设置为网格容器，然后让子元素占据网格容器中心位置，就实现了div的居中。使用网格布局要注意它目前不支持的浏览器。

.parent {
  display: grid;
}
.child {
  justify-self: center;
  align-self: center;
}

4.绝对位置布局方式

利用绝对定位也可以达到div居中的效果。通过在父元素中设置position:relative属性，在子元素中设置position:absolute，再配合top、bottom、left、right属性便可轻松实现。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

5.总结

以上便是解决不固定宽高情况下div居中的四种布局方式。在实际使用中，我们需要根据具体情况选择合适的布局方式。如果您有其他好的方法，也欢迎留言分享哦！