实现盒子居中

_大迷糊_

已于 2023-05-10 19:04:40 修改

阅读量80

点赞数

文章标签： css css3 html

于 2023-03-15 17:27:09 首次发布

本文链接：https://blog.csdn.net/weixin_42709466/article/details/129553750

版权

css 实现盒子居中

eg: 盒子样式：

.box{
	box-sizing: border-box;
	margin:20px;
	padding:15px;
	width:600px;
	height:300px;
	border:10px solid red;
}

法一：已知宽高【定位】

.box{
	position: absolute;
	top:50%;
	left:50%;
	margin-top：210px;
	margin-left:210px;
}

法二：【定位】

.box{
	position: absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	margin:auto;
} 
//或者
.box{
	position: absolute;
	top:25%;
	left:25%;
	bottom:25%;
	right:25%;
	margin:auto;
}

法三：C3偏移

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

法四：flex

设置需要居中元素的父元素为弹性布局flex, 仔规定内部容器的排列居中方式，假设需要居中元素的父元素为body
body{
	display:flex;
	justify-content: center;
	align-items: center;
} 

法五：原生js居中

top: (一个屏幕的高度 - 盒子的高度）/ 2 ;
left: (一个屏幕的宽度 - 盒子的宽度）/ 2 ;

 let winW = document.documentElement.clientWidth,
     winH = document.documentElement.clientHeight,
     box = document.getElementById('box');
let  boxW = box.offsetWidth,
     boxH = box.offsetHeight;
     box.style.position = 'absolute';
     box.style.left = (winW - boxW)/2 + 'px';
     box.style.top = (winH - boxH)/2 + 'px';