【CSS】居中的几种实现方式

最新推荐文章于 2024-11-06 20:22:24 发布

波吉

最新推荐文章于 2024-11-06 20:22:24 发布

阅读量1.2k

点赞数 2

分类专栏：面试前端 CSS 文章标签： css html css3 面试

本文链接：https://blog.csdn.net/weixin_42678675/article/details/118465647

版权

前端同时被 3 个专栏收录

71 篇文章 4 订阅

订阅专栏

面试

14 篇文章 0 订阅

订阅专栏

CSS

11 篇文章 0 订阅

订阅专栏

1. 前言

在 CSS 布局中，居中几乎是最常见的操作。居中方法有多种，但是需要清楚地知道在何种情况下用哪一种方式。

2. 实现方法

注：以下代码片段中，非重要代码的使用省略号替代

1）flex 布局

我在日常开发中最经常用到的是 flex 布局，因此使用 flex 进行垂直居中的操作也最常见，如下图的橙色部分，见 [Code 1.1]
在这里插入图片描述

/* Code 1.1 */
<div id="flex">
	<div style="width: 50px;height: 50px;background-color: #ffcc66;"></div>
</div>

#flex{
	display: flex;
	justify-content: center;
	align-items: center;
    ...
}

抛开 flex 布局不谈，以下分别介绍水平居中和垂直居中的方法

2）水平居中

注：关于 inline、block 的区别，可以看这篇文章inline、block、inline-block的区别

inline 元素：将父级设置为 text-align：center，见 [Code 2.1]
在这里插入图片描述

/* Code 2.1 */
<div id="container">
	<span>inline元素</span>
</div>

#container{
	...
	text-align: center;
}

block 元素：将本身设置为 margin：auto（自身水平居中），见 [Code 2.2]
在这里插入图片描述

/* Code 2.2 */
<div id="container">
	<div id="block">block元素</div>
</div>

#container{
		...	
}
#block{
	margin: auto;
    ...
}

absolute 元素：left：50% + margin-left 负值（自身宽度/2），见 [Code 2.3]
在这里插入图片描述

margin-left 取负值，会往自身的左方向移动
left:50% 会让元素的左端居中，因此需要加上 margin-left 来让其变成整体居中

/* Code 2.3 */
<div id="container">
	<div id="absolute">absolute元素</div>
</div>

#container{
	position: relative;
	...	
}
#absolute{
	position: absolute;
	left: 50%;
	margin-left: -25px;
}

3）垂直居中

inline 元素：line-height 的等于 height，见 [Code 3.1]
在这里插入图片描述

/* Code 3.1 */
<div id="container">
	<span>inline元素</span>
</div>

#container{
	width: 100px;
	height: 50px;
	line-height: 50px;
}

absolute 元素：

知道自身高度
top:50% + margin-top 负值（自身高度/2），见 [Code 3.2]

与 margin-left 一样，margin-top 设为负值会让自身元素向上偏移（但 margin-right 和 margin-bottom 不一样，详细可看这篇文章margin设为负值会发生什么？）

/* Code 3.2 */
<div id="container">
	<div id="absolute">absolute元素</div>
</div>

#container{
	...
    position: relative;
}

#absolute{
    ...
	position: absolute;
    height: 50px;
	top: 50%;
	margin-top: -25px;
}

不知自身宽高，只兼容支持CSS3的浏览器
top、left 让左上角居中定位，并通过 translate 往上往左移动自身宽高的50%，见 [Code 3.3]

/* Code 3.3 */
<div id="container">
	<div id="absolute">absolute元素</div>
</div>

#container{
    ...
	position: relative;
}

#absolute{
    ...
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

不知自身宽高，兼容性好

top、left、bottom、right = 0 + margin：auto，见 [Code 3.4]

/* Code 3.4 */
<div id="container">
	<div id="absolute">absolute元素</div>
</div>

#container{
    ...
	position: relative;
}

#absolute{
    ...
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
}

3. 总结

让元素垂直居中的方法中，最通用的方法是采用 flex 布局
知道自身元素宽高的情况下，可使用 margin-left 和 margin-top 负值的方法来做居中
不知道自身元素宽高
- 不考虑浏览器兼容性：使用 transform: translate 方法
- 考虑浏览器兼容性：使用 top、bottom、right、left = 0 的方法