高德地图标注信息，标注信息和图标居中怎么处理，给一个demo

以下是一个简单的 demo，使用了 JavaScript 和 CSS 来实现高德地图标注信息和图标的居中显示：

HTML 代码：

<div id="map"></div>

<div class="marker">
  <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" />
  <div class="info">这是一个标注信息</div>
</div>

CSS 代码：

#map {
  height: 400px;
}

.marker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.marker img {
  display: block;
  margin: 0 auto;
}

.marker .info {
  margin-top: 10px;
}

JavaScript 代码：

// 初始化地图
var map = new AMap.Map('map', {
  zoom: 14,
  center: [116.397428, 39.90923]
});

// 添加标注
var marker = new AMap.Marker({
  position: [116.397428, 39.90923],
  map: map
});

// 绑定标注信息窗口
var infoWindow = new AMap.InfoWindow({
  content: '<div class="marker"><img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" /><div class="info">这是一个标注信息</div></div>',
  offset: new AMap.Pixel(0, -36)
});
marker.on('click', function() {
  infoWindow.open(map, marker.getPosition());
});

在这个 demo 中，我们使用 CSS 中的 `transform` 属性来实现标注和图标的居中显示，同时使用 `text-align` 属性来实现标注信息的居中显示。此外，我们还使用了 AMap.InfoWindow 类来实现标注信息窗口的显示，并使用了 `offset` 属性来调整窗口的位置。