【HTML+CSS】实现小盒子水平垂直居中大盒子

article/2025/9/13 18:43:34

小div在大div中如何水平垂直居中
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种，下面仅列举了常用
的几种。
首先看一下要实现的效果图及对应的html代码：
在这里插入图片描述

// 大盒子嵌套小盒子 小盒子水平垂直居中
<div class="big"><div class="small"></div></div>

1.使用定位实现

* {margin: 0;padding: 0;}.big{position: relative;width: 300px;height:300px;margin: 100px auto;box-sizing: border-box;border:2px solid blue;}.small{position: absolute;width: 100px;height:100px;top:50%;left:50%;margin-top: -50px; /*这里是小盒子高的一半*/margin-left: -50px; /*这里是小盒子宽的一半*/box-sizing: border-box;border:2px solid red;}

使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.

2.使用定位和margin实现

.big{position: relative;width: 300px;height:300px;margin: 100px auto;box-sizing: border-box;border:2px solid blue;}.small{position: absolute;width: 100px;height:100px;margin:auto;top:0;right: 0;bottom: 0;left:0;box-sizing: border-box;border:2px solid red;}

实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子
的居中;

3.使用display:table-cell;

.big{display: table-cell;text-align: center;vertical-align: middle;width: 300px;height:300px;box-sizing: border-box;border:2px solid blue;}.small{display: inline-block;width: 100px;height:100px;box-sizing: border-box;border:2px solid red;}