【CSS】使元素在父元素中居中显示的几种方法

 一、使用边距进行固定位置

这种方法需要把父元素和子元素的宽度固定，然后利用二者宽高之差添加边距移动元素的位置

现在创建了一个父元素box1中包含了一个子元素box2,下边的许多案例都会使用这个盒子样式

<div class="box1">
	<div class="box2"></div>
</div>

.box1{
   width: 500px;
    height: 500px;
    background-color: #f00;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: #0f0;
}

 子元素默认在父元素的左上角位置，因为已经知道父元素和子元素的宽高，因此可以使用二者之差的二分之一作为边距宽度即可
500px - 100px = 400 ⇒ 400px / 2 = 200px

1、给父元素添加内边距

在元素添加padding值之后盒子的尺寸会加上内边距导致尺寸变大
如果不希望外边距影响父元素宽高需要添加 box-sizing: border-box;