让盒子上下左右居中显示css

首先你需要有一个显示的地方我这里就用盒子（bigdiv）装一个盒子（childdiv）来表示，如果是两个已知大小盒子就非常简单了，设置一些具体（具体需要根据你自己去算。注：特别注意border的使用也会占位置）的内外边距就可以达到预期。

主要讲一下未知大小时居中问题：

HTML

<div class="bigdiv">
    <div class="childdiv">我是子盒子</div>
</div>

css

.bigdiv{width: 300px;
　　     height: 300px;          //为了好看大盒子我设了一个大小根据你自己的实际情况而定
　　     border: 1px solid red;
　　     position: relative;}
.childdiv{width:auto;
　　　　　　border: 1px solid green;
　　　　　　position:absolute;left: 50%;//以大盒子为基准
　　　　　　top: 50%;
　　　　　　transform:translate(-50%,-50%);}//该属性允许我们对元素进行旋转、缩放、移动或倾斜。

主要运用了层定位拿bigdiv为标准（position: relative;）去定位childdiv（position:absolute;），只需设置对应的（left:、top:）就可以了其它位置也相同。

结果