css中没有宽高的div居中

CSS中的居中布局问题一直都是让开发者头疼的问题之一。尤其是当我们使用没有宽高的div元素时，如何居中它们就更加困难了。

对于有宽高的div元素，我们可以使用margin属性来实现居中。例如，将左右margin设置为auto即可实现水平居中：

div {
  width: 200px;  /* 假设宽度为200px */
  height: 100px; /* 假设高度为100px */
  margin: 0 auto; /* 将左右margin设置为auto实现水平居中 */
} 

但是，当div元素没有宽高时，上述方法就无法实现居中。为了解决这个问题，我们可以使用flexbox布局或CSS Grid布局来实现居中。

对于flexbox布局，我们可以将父元素的display属性设置为flex，并使用align-items和justify-content属性来实现水平和垂直居中。代码如下：

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

对于CSS Grid布局，我们可以将父元素的display属性设置为grid，并使用place-items属性来实现水平和垂直居中。代码如下：

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

总之，对于没有宽高的div元素，我们可以使用flexbox布局或CSS Grid布局来实现居中，以便更好地完成页面布局。