盒子垂直水平居中的常用方式

最新推荐文章于 2024-08-15 17:16:33 发布

乔的大明

最新推荐文章于 2024-08-15 17:16:33 发布

阅读量130

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_43296918/article/details/92773196

css(3) 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了盒子垂直水平居中的常用方式，包括基础html布局、css的flex布局、不同的position方式、position+translate以及table - cell等方法，聚焦于前端布局技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

盒子垂直水平居中的常用方式

基础html布局

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

css

flex布局

           .box{
				height: 300px;
				width:400px;
				border: 1px solid black;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.box .item{
				height: 200px;
				width:200px;
	            background: blue;
			}

position 1

           .box{
				height: 300px;
				width:400px;
				border: 1px solid black;
				position: relative;
			}
			.box .item{
				position: absolute;
				height: 200px;
				width:200px;
	            background: blue;
	            top: 0;
	            bottom: 0;
				right: 0;
				left: 0;
	            margin:auto;
			}

position 2

            .box{
				height: 300px;
				width:400px;
				border: 1px solid black;
				position: relative;
			}
			.box .item{
				position: absolute;
				height: 200px;
				width:200px;
	            background: blue;
	            top: 50%;
				left: 50%;
				margin-left: -100px;//自身宽度的一半
	            margin-top:-100px;//自身高度的一半
			}

position+translate

            .box{
				height: 300px;
				width:400px;
				border: 1px solid black;
				position: relative;
			}
			.box .item{
				position: absolute;
				height: 200px;
				width:200px;
	            background: blue;
	            top: 50%;
				left: 50%;
				transform:translate(-50%,-50%);
			}

table-cell

            .box{
				height: 300px;
				width:400px;
				border: 1px solid black;
                display: table-cell;
				vertical-align:middle;
				text-align: center;
   			}
			.box .item{
				height: 200px;
				width:200px;
	            background: blue;
				display: inline-block;
			}