18/10/30 | baidu 06 | css居中、布局

最新推荐文章于 2025-11-04 19:05:08 发布

原创最新推荐文章于 2025-11-04 19:05:08 发布 · 167 阅读

CC 4.0 BY-SA版权

4 篇文章

订阅专栏

本文详细介绍了使用CSS实现水平和垂直居中布局的各种方法，包括针对内联元素、定宽块级元素及未知宽度的块级元素的解决方案，涵盖了margin、position、transform、display等属性的灵活运用。

1.误加分号

样式块之间添加分号，导致样式失效。
在这里插入图片描述

1.水平居中

内联元素：

父元素，设置text-align: center
定宽块级元素：

自身，设置margin: 0 auto
定宽浮动元素：
设置定位后，可以重新布局元素框，进而定位到中点，是从中点开始排布，因此需要会拉自身宽度一半，达到居中的效果。

自身，设置position: relative; left: 50%; margin-left: -(1/2) width
自身，设置position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
未知宽度的块级元素：
自身，设置display: table; margin: auto
自身，设置position: absolute; left: 50%; transform: translateX(-50%)
自身，设置width: fit-content; margin: auto
自身，设置display: flex; justify-content: center;
父级，设置display: flex; flex-direction: column; 自身，设置align-self: center
父级，设置display: flex; 自身，设置margin: auto
父级，设置display: inline-block; position: relative; left: 50% 自身，设置position: relative; right: 50%

2.垂直居中

内联元素：
自身，设置line-height: height
父级，设置line-height: son-height;自身，设置vertical-align: middle
知道容器高度并且容器内只有一个元素：
自身，设置position: relative; top: 50%; transform: translateY(-50%)
不知道容器与自身高度：
父级，设置position: relative; 自身，设置position: absolute；top: 50%; transform: translateY(-50%)
父级，设置display: flex; align-items: center