[分享]css全屏自适应居中显示

CSS 全屏自适应居中显示是一种常见的网站布局设计，在不同尺寸或设备的屏幕上，能够让网页内容始终保持居中不会出现偏移或变形的这种布局。下面的 CSS 代码将演示如何实现这个效果。 html, body...

CSS 全屏自适应居中显示是一种常见的网站布局设计，在不同尺寸或设备的屏幕上，能够让网页内容始终保持居中不会出现偏移或变形的这种布局。下面的 CSS 代码将演示如何实现这个效果。

html, body {
  height: 100%;
}

.wrap {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  max-width: 100%;
  max-height: 100%;
  padding: 20px;
  background-color: #F2F2F2;
} 

首先，我们为 HTML 和 Body 元素设置高度为 100%，才能让容器元素和内容元素都占满屏幕。 接着我们在容器元素内部给它加上了 Flex 布局，让内容元素在容器内水平垂直居中。 最后在内容元素上设置最大宽高为 100%，它的样式应该根据实际应用场景进行调整，再添加一些合适的样式就可以了。

总结：使用 CSS 实现全屏自适应居中显示布局，可以让网页内容在多种分辨率的设备上都能保持居中不变形，无论是在哪种设备上，我们的布局效果都始终如一，更能提升用户的使用体验。