背景:开发中经常遇到盒子水平垂直居中的问题，即让某个元素的内容在水平和垂直方向上都居中，内容不仅限于文字，可能是图片或其他元素,本文汇总了几种简单常用的盒子居中方法,希望可以对前端同行们有一定的帮助

初始html结构及css样式如图所示:

页面初始渲染效果:

下面给div盒子设置样式,实现居中效果

方法一:利用定位+margin:auto来实现

 子盒子不设置宽高,则铺满整个父盒子(定位定在了四个角):

 子盒子设置宽高和margin:auto效果

实现原理:父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高.这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：auto它就可以上下左右都居中了,效果如图:

 方法二:子绝父相定位+margin负值实现

1、父盒子相对定位position：relative,子盒子绝对定位；position：absolute.

2、子盒子设置top50%,让盒子位于父盒子高度的50%.

3、子盒子设置margin-top:-50px，让盒子向上行走自身高度的一半，至此实现子盒子垂直居中.

4、子盒子设置left50%,让盒子位于父盒子宽度的50%.

5、子盒子设置margin-left:-100px，让盒子向上行走自身宽度的一半，实现子盒子水平居中.

代码:

方法三:定位+transform

子绝父相:子盒子position:absolute,父盒子position:relative;

子盒子

1.top:50%;

2.left50%;

3.transform:tanslate(-50%,-50%);向左向上走自身宽高的50%

代码:

方法四:父盒子flex弹性布局

父盒子设置:

1.display:flex;

2.justify-content:center;

3.items-align:center;

 其他补充:

1.块级元素水平居中,给自身添加margin:auto即可;

2.行内元素和行内块元素如若要在div块级盒子水平居中,需要给父元素设置text-align:center;属性,给行内元素及行内块元素本身设置text-align:center;属性无效;

3.行内元素垂直居中使用line-height:盒子的高度height+px;给行内元素本身设置或父元素设置line-height都行(行高可以继承);

4.行内块元素在div盒子中垂直居中需要给父元素设置line-height:盒子的高度+px;给行内块盒子本身设置无效;

5.行内块元素<img>、<button>、<select>水平居中,需要给父盒子设置text-align:center;属性,给行内块元素本身设置此属性无效.

6.input标签使用text-align:center;和line-height属性,可以让input内容实现水平垂直居中

7.行内块元素<input>、<img>、<button>、<select>与文本基线对齐时,给行内块元素本身设置vertical-align:top/middle/bottom属性,可实现与文本水平对齐.