css实现垂直水平居中的方法

最新推荐文章于 2023-02-22 15:30:52 发布

Robo12138

最新推荐文章于 2023-02-22 15:30:52 发布

阅读量122

点赞数

分类专栏： css 文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/Eilan_Chiu/article/details/123721032

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css实现水平垂直居中，笔记

方法有4种

一、最常用的方法利用绝对定位+transform

<!doctype html>
<html>
    <head>
	    <title>css实现水平垂直居中</title>
		<style>
		    .div{
				width: 800px;
				height: 600px;
				background-color: #f5f5f5;
				position: relative;
			}
			
			.box{
			    width: 200px;
				height: 200px;
				background-color: #ff0000;
			    position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%)
			}
		    
		</style>
	</head>
	<body>
		<div class="div">
		
			<div class="box">
				
			  
			</div>
		</div>
	
	<body>
	
</html>

二、flex居中

<html>
    <head>
	    <title>css实现水平垂直居中</title>
		<style>
		    .div{
				width: 800px;
				height: 600px;
				
				background-color: #f5f5f5;
				display: flex;
				justify-content: center;
				align-items: center;
				
			}
			
			.box{
			    width: 200px;
				height: 200px;
				background-color: #ff0000;
			}
		    
		</style>
	</head>
	<body>
		<div class="div">
		
			<div class="box">
				
			  
			</div>
		</div>
	
	<body>
	
</html>

三、父元素display: flex,子元素marin auto