css多种方式实现元素的居中效果

最新推荐文章于 2023-03-18 13:21:54 发布

TowYingWang

最新推荐文章于 2023-03-18 13:21:54 发布

阅读量460

点赞数

分类专栏：开发踩坑与技巧文章标签： css

本文链接：https://blog.csdn.net/xiaoermingn/article/details/52945652

版权

开发踩坑与技巧专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果

这里写图片描述

页面基本结构

<!DOCTYPE>
<html>
<head>
	<style>
		html,body{width:100%;height:100%;margin:0;padding:0;}
		.box{}
		.item{}
	</style>
</head>
<body>
	<div class="box">
		<div class="item"></div>
	</div>
</body>
</html>

方法

一、适用于父元素和子元素宽高都不固定

绝对定位拉伸效果(IE8+)

.box{
	/*父级元素宽高自适应*/
	width:100%;
	height:100%;
	background:#26a69a;
}		
.item{
	position:absolute;
	/*left/right/top/bottom都设为0会让元素被撕扯*/
	left:0;
	right:0;
	top:0;
	bottom:0;
	width:50%;
	height:50%;
	/*再通过margin:auto实现居中*/
	margin:auto;
	background:#000;
}

flex布局(IE10+)

.box{
	width:100%;
	height:100%;  
	display:flex;
	display:-webkit-flex;
	justify-content:center;
	align-items:center;
	background:#26a69a;
}
.item{
	width:50%;
	height:50%;
	background:#000;
}

-webkit-box布局(IE不兼容)

.box{
	width:100%;
	height:100%;  
	display:-webkit-box;
	-webkit-box-pack:center;/*水平方向居中*/
	-webkit-box-align:center;/*垂直方向居中*/
	background:#26a69a;
}
.item{
	width:50%;
	height:50%;
	background:#000;
}

二、适用于子元素宽高固定的水平居中

magin+left/top(只是一种思考方法，并不一定最实用)

.box{
	width:100%;
	height:100%;  
	background:#26a69a;
}
.item{
	position:absolute;
	width:200px;
	height:300px;
	left:50%;
	margin-left:-100px;/*自己宽的一半*/
	top:50%;
	margin-top:-150px;/*自己高的一半*/
	background:#000;
}

TowYingWang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css多种方式实现元素的居中效果

效果页面基本结构<!DOCTYPE><html><head> <style> html,body{width:100%;height:100%;margin:0;padding:0;} .box{} .item{} </style></head><body> <div class="box"> <div
复制链接

扫一扫