css不同的宽高怎么居中

CSS在页面中的使用非常广泛，不仅可以控制页面的布局，还可以控制元素的大小，位置和样式等，其中居中也是经常需要用到的效果之一。

在实现不同宽高元素居中的时候，可以分为两种情况：水平居中和垂直居中。

/* 水平居中 */
.center {
  width: 200px; /* 设置宽度 */
  height: 50px; /* 设置高度 */
  margin: 0 auto; /* 设置左右外边距为auto */
}

/* 垂直居中 */
.center {
  width: 150px; /* 设置宽度 */
  height: 150px; /* 设置高度 */
  position: absolute; /* 设置为绝对定位 */
  top: 50%; /* 设置相对于父元素顶部50%位置 */
  left: 50%; /* 设置相对于父元素左侧50%位置 */
  margin-top: -75px; /* 设置上边距为自身高度的一半的负值 */
  margin-left: -75px; /* 设置左边距为自身宽度的一半的负值 */
} 

以上是两种比较常见的居中方式，当然还可以通过Flex布局等方式实现不同场景下的居中效果。

在实际开发中，我们可能还需要考虑到响应式布局的情况，这时候可以使用媒体查询来单独设置不同屏幕尺寸下的居中效果。

@media screen and (max-width: 768px) {
  /* 当屏幕宽度小于等于768px时 */
  .center {
    width: 100%;
    margin: 0;
  }
} 

总之，CSS提供了丰富的居中方式，可以根据实际场景选择适合的方案实现元素的居中效果。