css实现元素垂直水平居中总结

最新推荐文章于 2024-02-16 15:16:10 发布

懒羊羊我小弟

最新推荐文章于 2024-02-16 15:16:10 发布

阅读量380

点赞数

分类专栏： H5+CSS3 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/IO14122/article/details/125542904

版权

H5+CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、前言

无论是实际开发中，或者是求职面试中，css 垂直水平居中往往都是一个相当重要的点，其中面临这类问题时总是没办法全方位的解释。为此我总结出几种方案，可以应用于面试或者日常开发中。

而居中总得来说分为两种类型：子元素宽高已知和子元素宽高未知，而接下来就对于这两种类型针对性提出方案。

二、子元素宽高已知

2.1 position + margin: auto

实现原理： 父元素和子元素必须要设置高度，然后设置定位，利用top: 0;left: 0; bottom: 0;right: 0;使四个方向达到平衡，最后实现margin: auto;实现居中。

实现步骤：

父元素相对定位，子元素绝对定位
在子元素中设置top: 0;left: 0; bottom: 0;right: 0;
最后margin： auto；实现居中

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background: skyblue;
	}
	.son {
		position: absolute;
		width: 80px;
		height: 80px;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		background: pink;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

2.2 position + margin负值微调

实现原理： 子元素时相对于父元素来定位的，所以只需要利用两侧50%的定位，然后用margin微调位置便可实现居中。

实现步骤：

父元素相对定位，子元素绝对定位
子元素设置top: 50%;left: 50%;
子元素再利用margin微调位置，便可实现居中

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background: skyblue;
	}
	.son {
		position: absolute;
		width: 80px;
		height: 80px;
		top: 50%;
		left: 50%;
		margin: -40px 0 0 -40px;
		background: pink;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

2.3 position + calc

实现原理： 其实与上一个原理相同，只不过省略了margin微调位置，通过calc直接计算出子元素左右移动的距离。

实现步骤：

父元素相对定位，子元素绝对定位
子元素设置top: calc(50% - 子元素高度一半);left: calc(50% - 子元素宽度一半);
便可实现居中

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background: skyblue;
	}
	.son {
		position: absolute;
		width: 80px;
		height: 80px;
		top: calc(50% - 40px);
		left: calc(50% - 40px);
		background: pink;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

2.4 margin + transform

实现原理： 子元素margin: 50% auto 0;后，子元素会水平居中，在利用transform: translateY(-50%);实现垂直居中。

注意： 这个地方会出现父子上外边距合并问题，给父元素设置overflow: hidden;或者设置边框都可以解决

实现步骤：

父元素设置overflow: hidden;,防止外边距塌陷
子元素设置margin: 50% auto 0;transform: translateY(-50%);
便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		overflow: hidden;
	}
	.son {
		width: 80px;
		height: 80px;
		margin: 50% auto 0;
		transform: translateY(-50%);
		background: pink;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

2.5 transform实现视觉上水平垂直居中

实现原理： 通过css新特性transform微调子元素位置，从而实现视觉上的居中（元素依然占据之前位置）

实现步骤：

必须要知道父元素的宽高；
子元素设置transform: translate(父元素宽度一半,父元素高度一半);
便可实现视觉上居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
	}
	.son {
		width: 80px;
		height: 80px;
		transform: translate(200px,200px);
		background: pink;
	}
</style>
<div class="father">
	<div class="son"></div>
</div>

三、子元素宽高未知

3.1 position + transform

实现原理： transform是 CSS3 的新特性；因为 transform 的 translate 属性值如果是一个百分比，那么这个百分比将是基于自身的宽高计算出来的。通过position设置left: 50%;top: 50%;再使用transform: translate(-50%, -50%);

实现步骤：

父元素相对定位，子元素绝对定位
子元素设置top: 50% ;left: 50%;
子元素设置transform: translate(-50%, -50%);,便可实现居中

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background: skyblue;
	}
	.son {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);	
		background: pink;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>

3.2 flex布局

实现原理： 现在比较流行的布局方案，功能强大。

实现步骤：

父元素开启flex布局；
父元素设置justify-content: center;align-items: center;
子元素内容便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.son {
		background: pink;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>

3.3 flex + margin: auto

实现原理： 通过父元素开启flex布局后，子元素设置margin:a auto。从而更快捷的实现居中。

实现步骤:

父元素开启flex布局；
子元素元素设置margin: auto
子元素内容便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		display: flex;
	}
	.son {
		margin: auto;
		background: pink;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>

3.4 grid布局一

实现原理： grid 布局在实际项目中用的较少，grid 在 css 布局中绝对是一个质的提升。奈何兼容性不好，导致现在使用比较少。

父元素开启grid布局，设置方式与上面flex相同，便可实现居中。

实现步骤：

父元素开启grid布局；
父元素设置justify-content: center;align-items: center;
子元素内容便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		display: grid;
		justify-content: center;
		align-items: center;
	}
	.son {
		background: pink;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>

3.5 grid布局二

实现原理： 父元素开启grid布局后，也可以在子元素下面设置align-self: center;justify-self: center;，便可实现居中。

实现步骤：

父元素开启grid布局；
子元素设置align-self: center;justify-self: center;
子元素内容便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		display: grid;
	}
	.son {
        align-self: center;
        justify-self: center;
		background: pink;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>

3.6 line-height + text-align

实现原理： 这种方式实现居中的前提是子元素必须是行内元素，通过再父元素中设置text-align: center;line-height: 高度;

实现步骤：

先给父元素设置行高为自身高度，文字在内容区居中；
子元素先设置为行内块，之后设置行高继承父元素initial；
子元素内容便可实现居中

<style>
	.father {
		width: 400px;
		height: 400px;
		background: skyblue;
		line-height: 400px;
		text-align: center;
	}
	.son {
		background: pink;
		display: inline-block;
		line-height: initial;
	}
</style>
<div class="father">
	<div class="son">我是居中的内容</div>
</div>