html点图片放大居中

在HTML中实现点击图片放大并且居中的效果，通常需要结合HTML、CSS和JavaScript来完成。下面是一个简单的示例，说明如何通过CSS样式和JavaScript脚本来实现这一功能：

HTML部分：

<img src="path_to_image.jpg" id="thumbnail" class="clickable" alt="可点击的图片">

CSS部分：

.clickable {
  width: 100px; /* 设置图片默认宽度 */
  cursor: pointer; /* 将鼠标指针显示为手形，表示可点击 */
}

.modal {
  display: none; /* 默认隐藏弹出窗口 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 置于顶层 */
  padding-top: 100px; /* 使图片居中显示 */
  left: 0;
  top: 0;
  width: 100%; /* 弹出窗口覆盖全屏 */
  height: 100%; /* 弹出窗口覆盖全屏 */
  overflow: auto; /* 滚动条 */
  background-color: rgb(0,0,0); /* 背景颜色 */
  background-color: rgba(0,0,0,0.9); /* 背景颜色，带有透明度 */
}

.modal-content {
  margin: auto; /* 自动外边距使图片居中 */
  display: block; /* 显示为块级元素 */
  width: 80%; /* 图片宽度 */
  max-width: 700px; /* 图片最大宽度 */
}

JavaScript部分：

document.getElementById('thumbnail').onclick = function() {
  var modal = document.createElement('div');
  modal.innerHTML = '<span onclick="this.parentElement.style.display='none';">&times;</span>' +
                    '<img id="modal-content" src="' + this.src + '" alt="放大图片">';
  modal.className = 'modal';
  document.body.appendChild(modal);
  
  // 点击关闭按钮或者背景遮罩时关闭模态框
  modal.onclick = function() {
    document.body.removeChild(modal);
  }
  
  // 给图片添加点击事件，可以再次点击图片关闭模态框
  document.getElementById('modal-content').onclick = function() {
    modal.style.display = 'none';
  }
}

这段代码的主要逻辑是：
1. 当用户点击图片时，JavaScript创建一个新的`div`元素，作为模态框来承载点击的图片。
2. 通过CSS样式使得模态框固定定位在屏幕上，并且背景半透明，遮罩整个页面。
3. 在模态框中显示原图，并添加一个关闭按钮，点击按钮或模态框背景即可关闭模态框。