CSS掌握盒子水平居中的几大方案

最新推荐文章于 2022-04-21 11:06:00 发布

Nancy青

最新推荐文章于 2022-04-21 11:06:00 发布

阅读量205

点赞数

分类专栏： html5 css 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_45236346/article/details/106551908

版权

html5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

掌握盒子水平居中的几大方案

定位(三种)
display:flex
JavaScript
display:table-cell

.father{
	display:table-cell;
	vertical-align:middle;
	text-align: center;
}

其中display:table-cell不常见，它是控制文本的水平垂直居中的，并不是控制盒子，但可以把盒子变成文本

下面附上全部的代码，可能看的有点不舒服，需要一个一个去找，解释全都在注释里。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		html,
		body {
			/* position: relative; *//* 方式三：js实现 */
			/* height: 100%; *//* 方式四：display:table-cell,此高度需要注释掉 */
			overflow: hidden;
		}
		
		.box {
			box-sizing: border-box;
			width: 100px;
			height: 50px;
			line-height: 48px;
			text-align: center;
			font-size: 16px;
			border: 1px solid lightblue;
			background: lightcyan;
		}
		/* 方式一 ：定位(三种)*/	
		/* body{
			position: relative;
		} */
		/*定位1*/
		/* 需要知道具体的宽和高 */
		/* .box{
			position: absolute;			
			top:50%;
			left: 50%;
			margin-top: -25px;
			margin-left: -50px;
		} */
		/*定位2*/
		/* 不需要考虑宽和高，但是一定要有宽和高 */
		/* .box{
			position: absolute;			
			top:0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		} */
		/*定位3*/
		/* css3的位移transform，不需要计算和宽高，但兼容性不好 */
		/* .box{
			position: absolute;			
			top:50%;
			left: 50%;
			transform: translate(-50%,-50%);（往左移，往上移）
		} */
		
		/* 方式二：display:flex */
		/* 兼容性问题大，移动端常用 */
		/* body {
			display: flex;
			justify-content: center;水平(x轴)居中
			align-items: center;垂直(y轴)居中
		} */
		
		/* 方式四：display:table-cell
		(控制文本的水平垂直居中，并不是控制盒子，但可以把盒子变成文本) */
		body{
			display: table-cell;
			vertical-align: middle;/* 垂直居中 */
			text-align: center;/* 水平居中 */
			/* 弊端：父级必须要有固定宽高 */
			width: 500px;
			height: 500px;
			background: lightcoral;
			/* 在500*500范围内居中 */
		}
		.box{
			display: inline-block;
		}
	</style>
	
	<body>
		<div class="box" id="box">
			Hello World
		</div>
		
	</body>
	<!-- 方式三：js实现 -->
	<script type="text/javascript">
		// box直接通过id获取
		// let HTML = document.documentElement,
		// 	winW = HTML.clientWidth,//获取屏幕的宽
		// 	winH = HTML.clientHeight,//获取屏幕的高
		// 	boxW = box.offsetWidth,//获取盒子的宽
		// 	boxH = box.offsetHeight;//获取屏幕的高
		// box.style.position = "absolute";
		// box.style.left = (winW - boxW) / 2 + 'px';//水平居中
		// box.style.top = (winH - boxH) / 2 + 'px';//垂直居中	
	</script>
</html>

ps:此方案是在b站跟着周啸天老师学的，有兴趣的小伙伴可以去学习一下，主要讲的是面试题和答题技巧。学习地址：https://www.bilibili.com/video/BV1ek4y1r7GT

Nancy青

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS掌握盒子水平居中的几大方案

掌握盒子水平居中的几大方案定位(三种)display:flexJavaScriptdisplay:table-cell.father{ display:table-cell; vertical-align:middle; text-align: center;}其中display:table-cell不常见，它是控制文本的水平垂直居中的，并不是控制盒子，但可以把盒子变成文本下面附上全部的代码，可能看的有点不舒服，需要一个一个去找，解释全都在注释里。<!DOCTYPE ht
复制链接

扫一扫

专栏目录