js设置居中显示

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-vertical {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 视口高度 */
}

function setHorizontalCenter(element) {
  element.style.display = 'block';
  element.style.marginLeft = 'auto';
  element.style.marginRight = 'auto';
}

// 使用示例
const myElement = document.getElementById('myElement');
setHorizontalCenter(myElement);

function setVerticalCenter(element) {
  element.style.display = 'flex';
  element.style.alignItems = 'center';
  element.style.justifyContent = 'center';
  element.style.height = '100vh'; // 视口高度
}

// 使用示例
const myElement = document.getElementById('myElement');
setVerticalCenter(myElement);

.container {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 视口高度 */
}

<div class="container">
  <div id="myElement">居中显示的内容</div>
</div>

.container {
  display: grid;
  place-items: center; /* 同时水平和垂直居中 */
  height: 100vh; /* 视口高度 */
}

<div class="container">
  <div id="myElement">居中显示的内容</div>
</div>