小div在大div中垂直居中的方式

最新推荐文章于 2024-06-30 23:48:24 发布

xiongdaandxiaomi

最新推荐文章于 2024-06-30 23:48:24 发布

阅读量7.5k

点赞数 1

分类专栏： CSS 文章标签：垂直居中 css

本文链接：https://blog.csdn.net/xiongdaandxiaomi/article/details/82695311

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果图
这里写图片描述

方法一

<style type="text/css">
 	.container{
 		width: 100%;
 		height: 100px;
 		background-color: blue;
 		position: relative;
 	}
 	.box{
 		width: 100px;
 		height: 100px;
 		background-color: red;
 		position: absolute;
 		left: 0;
 		top: 0;
 		bottom: 0;
 		right: 0;
 		margin: auto;
 	}

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

方法二

.container{
 		width: 100%;
 		height: 100px;
 		background-color: blue;
 		position: relative;
 	}
 	.box {
	    width: 100px;
	    height: 100px;
	    background-color: red;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    margin: auto;
	    margin-left: -50px;
	    margin-top: -50px;
	}

方法三

.container{
 		width: 100%;
 		height: 100px;
 		background-color: blue;
 		display:flex;
 		justify-content:center;
 		align-items:center;
 	}
 	.box {
	    width: 100px;
	    height: 100px;
	    background-color: red;
	}