如何使div 上下左右居中 css

最新推荐文章于 2024-08-03 22:09:54 发布

一染星辰

最新推荐文章于 2024-08-03 22:09:54 发布

阅读量2.2k

点赞数 1

分类专栏：复习p1阶段文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_59519449/article/details/121617055

版权

复习p1阶段专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路：

1.行内文本居中的话，用text-align:center 即可！！！

2. 使用块级元素总共两个方法：

方法<1>:

在父级元素变成弹性盒子 display:flex

justify-content:cent 让其左右居中；

align-items: center; 让其上下居中

方法<2> :

在子集给予相对于一个定位 position: relative

左上50%； margin: -50px 0px 0px -50px

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				background-color: pink;
				text-align: center;
			}
			.one{
				width: 500px;
				height: 500px;
				
				background-color: pink;
				/* 方法一 */
			/* 	display: flex;
				justify-content: center;
				align-items: center; */
				
			}
			
			.two{
				width: 100px;
				height: 100px;
				background-color: chartreuse;
				
				/* 方法二 */
			/* 	position: relative;
				left: 50%;
				top: 50%;
				margin: -50px 0px 0px -50px; */
			}
		</style>
	</head>
	<body>
		<!-- 文本居中 行内元素  设置水平居中 -->
		<p><span>1234</span></p>
		<!-- 块元素居中 margin:0 auto -->
		<!-- 面试题  如何使用div 上下左右居中方式1已知方式 --> 
		<div class="one">
			<div class="two"></div>
		</div>
	</body>
</html>