如何实现div水平居中略偏左，手机尺寸下自动水平垂直居中

请查看下方参考效果示例：

实现代码 #

直接替换原有样式即可，HTML结构不需要改动：

<style>
/* 基础重置，消除浏览器默认边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 24px;
}
.profile {
  width: 480px;
  max-width: 100%;
  height: 380px;
  background-color: lightblue;
  padding: 20px;
  /* 调整这个数值控制左偏程度，数值越大左移越多 */
  margin-right: 10vw;
}
.about {
  line-height: 1.6;
}

/* 768px以下为手机尺寸断点，可根据需求调整阈值 */
@media (max-width: 767px) {
  .profile {
    margin-right: 0;
    height: auto;
    min-height: 320px;
  }
}
</style>

对应HTML结构（保持原有写法即可）：

<div class="container">
  <div class="profile">
    <p class="about">Lorem ipsum dolor sit, amet consectetur adipisicing elit. At corporis voluptatibus officiis? Minus architecto voluptatum ea enim eos exercitationem perferendis quae necessitatibus rerum mollitia, atque doloremque obcaecati unde officia soluta?</p>
  </div>
</div>

关键说明 #

• 原写法缺陷：给container固定50%宽度的偏移方式适配性差，且没有给根元素设置高度导致垂直居中失效，固定宽度的内容块在小屏会溢出。
• 桌面端左偏效果通过给内容块加右侧外边距实现，基于视口宽度的vw单位可以保证不同屏幕尺寸下偏移比例一致，视觉效果更统一。
• 小屏下通过媒体查询移除偏移量，同时给内容块设置max-width:100%，避免内容溢出屏幕，自动实现水平+垂直双居中。
• 可根据实际视觉需求调整margin-right的数值、媒体查询断点，匹配想要的左偏程度和适配阈值。

内容的提问来源于stack exchange，提问作者Jio