【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;
关于box-sizing

.box1{
   width: 500px;
    height: 500px;
    background-color: #f00;
    padding:200px //使用内边距将四周距离全部占满，使子元素被挤在中间
    box-sizing: border-box  //将宽高变为盒子宽高而不是内容区宽高
}

2、给子元素添加外边距

直接给子元素添加外边距margin值即可,效果与上边一样，无需修改box-sizing

.box2{
	margin:200px
}

此时父元素剩余空间被子元素的外边距占满

二、使用绝对定位

使用绝对定位的方法可以在父元素与子元素宽高不固定的情况下进行定位，使元素进行居中
元素开启绝对定位之后可以脱离文档流，因此元素居中后会浮在父元素中间
使用绝对定位进行元素居中有两种方法

1、添加 x轴 和 y轴 偏移量后往回移动

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

.box1{
	position:relative;  //给父元素添加绝对定位，使开启绝对定位的子元素相对于父元素进行定位
	width: 500px;
	height: 500px;
	background-color: #f00;
}
.box2{
	position:absolute; //开启绝对定位

	//使子元素的一个角居中
	//偏移方向并不固定，只要水平方向和垂直方向各一个即可
	top:50%;	// 使子元素的顶部在父元素的50%高度位置
	left:50%;	// 使子元素的左部在父元素的50%高度位置

	//使子元素的x轴往回走自身的一半距离
	//在确定子元素的宽高时，添加负外边距
	margin-top:-50px;
	margin-left:-50pz;

	//在不知道子元素的宽高时，可以使用transform的translate属性进行移动
	//transform：translateX(-50%) translateY(-50%);

	width: 100px;
	height: 100px;
	background-color: #0f0;
}

2、使用自动外边距进行定位

将子元素的四周偏移量全部设置为0，同时添加自动外边距，浏览器会添加自动将外边距渲染到距离父元素0px的位置并且使元素四周的边距相等

.box1{
	position:relative
    width: 500px;
    height: 500px;
    background-color: #f00;
}
.box2{
	position:absolute;  //子元素开启绝对定位
	//将子元素的四周偏移量都设置为0 并添加自动外边距，浏览器会自动添加一个同时满足四周边距相等并且占满父元素距离
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;

    width: 100px;
    height: 100px;
    background-color: #0f0;
}

自动外边距会使盒子大小加上外边距的尺寸与父元素的尺寸相等

三、使用弹性盒进行定位

弹性盒子是 CSS3 的一种新的布局模式。弹性布局对于排列容器中的子元素更加便捷

1、单行元素居中

单行元素居中只需要给父元素开启弹性盒并且设置justify-content与align-items即可

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

.box1{

	display:flex;  // 开启弹性盒
	justify-content:center; //使子元素在主轴居中
	align-items:center;  	//使子元素在侧轴进行居中

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

2、多行元素居中

如果存在多行元素的话，使用上面的方法就无法居中，元素会在每行的区域内进行居中

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

.box1{
    width: 500px;
    height: 500px;
    background-color: #f00;

    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: #0f0;
}

这时就需要用到另一个弹性盒的属性值align-content
将父元素的align-items修改为align-content即可
或者使用简写属性place-content:center
关于place-content

.box1{
    width: 500px;
    height: 500px;
    background-color: #f00;

    display: flex;
    flex-flow: row wrap;

    //justify-content: center;
    //align-content: center;
	//使用简写属性  place-content: <align-content><justify-content默认值为center>
	place-content:center;
}

OK~!