CSS: 只用 CSS 做到完全居中 | CSS Center

css-center.css

/** 只用 CSS 做到完全居中 **/
.absolute-center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  /*overflow: auto;*/
  margin: auto;
}

/* 容器内对齐 */
.absolute-center-container {
  position: relative;
}

/* 在可视区域内居中 */
.absolute-center-fixed {
  position: fixed;
  z-index: 999;
}

/* 带响应式 */
.absolute-center-responsive {
  width: 60%; 
  height: 60%;
  min-width: 200px;
  max-width: 400px;
  padding: 40px;
}

/* 大小可调整 */
.absolute-center-resizable {
  min-width: 20%;
  max-width: 80%;
  min-height: 20%;
  max-height: 80%;
  resize: both;
  overflow: auto;
}

/* 图像 */
.absolute-center-img {
  height: auto;
}
.absolute-center-img img { 
  width: 100%;
  height: auto;
}