html中的居中方法合集
1. `.one` 和 `.one-son`：
- `.one` 使用 `text-align: center;` 属性将父元素中的文本内容水平居中对齐。
- `.one-son` 使用 `display: inline-block;` 属性将子元素变为行内块元素，以便使其在一行内显示。
2. `.two` 和 `.two-son`：
- `.two` 使用 `margin: auto;` 属性来使父元素水平和垂直居中。然而，这个方法仅对具有固定宽度和高度的块元素生效。
- `.two-son` 使用 `margin: auto;` 属性使子元素在父元素中水平和垂直居中。然而，这种方法会影响其他元素的布局。
3. `.three` 和 `.three-son`：
- `.three` 使用 `position: relative;` 属性将父元素设置为相对定位，为子元素的绝对定位提供参考。
- `.three-son` 使用 `position: absolute;` 属性将子元素设置为绝对定位，并使用 `left: 50%;` 和 `margin-left: -50px;` 属性使子元素在父元素中水平居中。`left: 50%;` 将子元素的左边缘移动到父元素的水平中心，而 `margin-left: -50px;` 则通过负的子元素宽度的一半将其居中。
4. `.four` 和 `.four-son`：
- `.four` 使用 `display: flex;` 属性将父元素设置为弹性盒子，以便对其子元素进行灵活的布局。
- `.four` 使用 `justify-content: center;` 属性将子元素在主轴上居中对齐。
Document
效果图：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！