css 垂直水平居中的方法

最新推荐文章于 2024-09-02 08:00:00 发布

zhuhongjin0610

最新推荐文章于 2024-09-02 08:00:00 发布

阅读量80

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lianxin19900610/article/details/82461207

版权

前端专栏收录该内容

51 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div{
				width: 600px;
				height: 600px;
				background: darkred;
				position: relative;
			}
			.div div{
				width: 200px;
				height: 200px;
				background: #000;
				position: absolute;
			    top: 50%;
			    left: 50%;
			    -webkit-transform: translate(-50%, -50%);
			    -moz-transform: translate(-50%, -50%);
			    transform: translate(-50%, -50%);
			}
			.div2{
				height: 400px;
				line-height: 400px;
				width: 400px;
				background: #000;
				display: flex;
			    justify-content: center;
			    align-items: center;
			    text-align: center;
			}
			.div3{
				display: inline-block;
				width: 100px;
				height: 100px;
				vertical-align: middle;
				background: #fff;
			}
		</style>
	</head>                                                                                
	<body>
		<div class="div">
			<div class="div1">
				我在中间
			</div>
		</div>
		
		<div class="div2">
			<div class="div3">
				我在中间
			</div>
		</div>
		
	</body>
</html>