css水平垂直居中

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

lynachen

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

阅读量205

点赞数

分类专栏： css

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Julylyna/article/details/82415466

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<div class="box"></div>

水平居中：

1.设置宽度，然后添加margin:0 auto属性;

		.box {
			width: 200px;
			height: 200px;
			background-color: #ccc;
			margin:0 auto;
		}

2.设置绝对定位absolute;

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #ccc;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin:auto;
		}

3.利用flex布局

	<div class="container">
		<div class="box"></div>
	</div>

		.container {			
			display: flex;
			justify-content: center;
		}
		.box {
			width: 200px;
			height: 200px;
			background-color: #ccc;		
		}

水平垂直居中

1.设置绝对定位absolute，设置宽高及外边距

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #ccc;
			top: 50%;
			left: 50%;
			margin-top: -100px;
			margin-left: -100px;
			
		}

2.利用transform属性

		.box {
			position: absolute;
			width: 200px;
			height: 200px;
			background-color: #444;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);			
		}