div 使用margin: auto;后仅两端居中

当一个块级元素使用`margin:auto`属性时，它会在水平方向上居中对齐。具体而言，当设置`margin: 0 auto;`时，元素的左右外边距会自动均分，从而使元素在容器中水平居中。这意味着元素的左外边距和右外边距将会是相等的，从而使元素在容器中居中对齐。所以当一个div元素使用`margin: 0 auto;`时，它会在水平方向上仅两端居中。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [css margin:auto的使用](https://blog.csdn.net/weixin_43294560/article/details/121821944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]

相关问题

margin 0 auto text-align

margin：0 auto 表示将元素的上下边距设置为0，左右边距自动调整。这个属性通常用于居中元素。当将一个元素的 margin 设置为 0 auto 时，它会在水平方向上居中对齐，即使容器的宽度改变，元素仍然会保持居中。

text-align：justify 表示对齐内容为两端对齐。如果元素中的文本内容被设置为 justify，则段落的两端都会对齐。这通常用于段落或文字块。

所以当我们将某个元素的 margin 设置为 0 auto，而该元素中的文本内容又设置为 text-align: justify 时，该元素会在水平方向上居中对齐，并且其中的文本内容也会以两端对齐的方式呈现。

在页面布局中，这个组合可以应用于居中对齐一些块级元素，例如 div、图片或者一段文字。通过将 margin 设置为 0 auto 来使元素居中，同时通过设置文本对齐为 justify 来呈现均匀的文本布局。这样可以使页面的视觉效果更加美观，并且适应不同尺寸和分辨率的设备。

两个第div并排显示，一个居中一个靠右

可以使用flex布局来实现两个div并排显示，一个居中一个靠右。

HTML代码：

<div class="container">
  <div class="center">这个div居中显示</div>
  <div class="right">这个div靠右显示</div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: space-between; /* 左右两端对齐 */
  align-items: center; /* 垂直居中 */
}

.center {
  margin: 0 auto; /* 水平居中 */
}

.right {
  margin-left: auto; /* 右对齐 */
}

这样，左侧的div会水平居中显示，右侧的div会靠右对齐显示。