盒子居中方法总结

最新推荐文章于 2023-09-07 08:55:52 发布

OnlyCong

最新推荐文章于 2023-09-07 08:55:52 发布

阅读量380

点赞数 1

分类专栏： CSS 文章标签：前端 css3

本文链接：https://blog.csdn.net/m0_60316162/article/details/132030369

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用例子的基础结构

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

1. 定位法

1.1 负margin居中（传统方法）

使用简单的父相子绝定位法，利用left和top控制子元素的左上角垂直水平居中,偏移量都为50%。然后使用margin-top和margin-left进行盒子位置的回移自身高度的一半。

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background-color: pink;
	}
	.son {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -50px;
		margin-left: -50px;
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
</style>

但该方法必须提前知道子盒子的宽高，如果不知晓则无法精准居中。而真实项目里元素样式很多时候数据源来自后台请求，所以拿不到元素的具体宽高。

1.2 margin : auto居中（绝对定位法）

让子盒子四个方向的定位都为0，此时小盒子还位于原位（左上角），再使用margin: auto让他上和下，左和右的外边距保持一致。由于子盒子四个方向的定位值都为0，所以会自动将子盒子拉到正中间。

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background-color: pink;
	}
	.son {
		margin: auto;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
</style>

这个方法用在垂直（或水平）居中都可以，就使它的上下（左右）同时为 0 就可以实现垂直（水平）居中。该方法虽然可以不知道子盒子的宽高就进行居中显示，但是子盒子宽高必须存在。如果不设置子盒子宽高，会自动铺满全屏（绝对定位后，四个方位值为0的效果，不设置宽，则宽铺满，不设置高则高铺满，都不设置则宽高铺满）。

1.3 不确定宽高居中

该方法根据上文方法的缺陷进行调整优化，这种较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background-color: pink;
	}
	.son {
		margin: auto;
		position: absolute;
		left: 20%;
		top: 20%;
		right: 20%;
		bottom: 20%;
		background-color: skyblue;
	}
</style>

1.4 transform位移

跟第一种定位方法一样，先将左上角定位到父盒子中间位置。然后使用css3中的transform属性里面的translate方法，该方法表示平移自身元素的多少位置。

translateX为平移横坐标，translateY平移纵坐标，translate则平移横纵坐标。参数一为横坐标，参数二为纵坐标。使用-50%表示向左向上平移自身一半位置，达到居中效果。

<style>
	.father {
		position: relative;
		width: 400px;
		height: 400px;
		background-color: pink;
	}
	.son {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 200px;
		height: 200px;
		background-color: skyblue;
		transform: translate(-50%, -50%);
	}
</style>

2.flex流动布局法

flex的流动布局也是非常推荐的一种解决布局的方法，直接设置为flex流动布局，然后让父盒子内的元素位于x轴，y轴居中即可。

justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items用于设置或检索弹性盒子元素在交叉轴（纵轴）方向上的对齐方式。

<style>
	.father {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 400px;
		height: 400px;
		background-color: pink;
	}
	.son {
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
</style>

3.table-cell布局法

该方法是将子元素设置为行内元素或者行内块级元素，然后将父元素display设置为table-cell后，使用对文本使用的居中方法对子盒子进行居中显示。（不常用）

text-align: center实现文本水平居中
vertical-align: middle实现文本垂直居中

<style>
	.father {
		display: table-cell;
		width: 400px;
		height: 400px;
		text-align: center;
		vertical-align: middle;
		background-color: pink;
	}
	.son {
		display: inline-block;
		width: 200px;
		height: 200px;
		background-color: skyblue;
	}
</style>

该方法为了达到居中目的而将元素设置为行内元素是不可取的，会丧失块级元素的特性，得不偿失。并且父盒子的宽高必须设置为具体值，不能设置为百分比或空缺。

3.js布局法

 <script>
    let father = document.querySelector('.father')
    let son = document.querySelector('.son')
    let fatherWidth = father.clientWidth
    let sonWidth = son.clientWidth
    let fatherHeight = father.clientHeight
    let sonHeight = son.clientHeight
    son.style.position = 'relative'
    son.style.left = (fatherWidth-sonWidth)/2 + 'px'
    son.style.top = (fatherHeight-sonHeight)/2 + 'px'
</script>