css上下左右居中的样式（面试必问）

//示例html代码 
 <div class="container">
    <div class="content-center">
      Test
    </div>
  </div>

方法1：定位+transform: translate

前提：父元素为屏幕大小（或固定宽高），子元素固定宽度
父元素：宽、高100%；绝对定位且top，left0
子元素：固定宽度；相对定位且left、top 50%，使用transform: translate相对自身宽度进行移动达到上下居中，左右居中的效果。

注意：需要具体的高度和宽度，父元素尺寸固定，子元素高度超过父元素时，子元素上方部分看不到，下方父元素空白。

//css代码
.container {
  background-color: pink;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.content-center{
  background-color: brown;
  position: relative;
  width: 500px;
  left: 50%;
  top: 50%;
  //兼容
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

方法2：父元素padding值

前提：父元素设置padding值，子元素宽高不固定
父元素：设置padding值，
子元素：宽高不固定
注意：父元素高度随子元素变化，不适用于登录，弹框这种固定背景的页面

//css代码
.container {
  padding: 30%;
  background-color: pink;
}
.content-center {
  background-color: brown;
}

方法3：line-height+ display: inline-block;

前提：子元素固定宽高
行高如果设置为当前父div的高度(400px)的话，
有固定高度的子div并不会居中显示的，问题出在浏览器默认将其当做文本居中的，
即把它当做了一段文本（chrome默认font-size:16px;hight:21px）进行居中，
没把它当做高度100px进行居中。所以需要对父div的line-height进行调整。
以font-size:0（对应的字体高度为0）为例子，
则需要line-height增加一个子div的高度（400px + 200px;）。

//css代码
.container {
  background-color: pink;
  line-height: 600px;
  height: 400px;
  text-align: center;
  /* width: 100%; */
  font-size: 0;
  /* 注：  */
}
.content-center {
  background-color: brown;
  display: inline-block;
  width: 200px;
  height: 200px;
  font-size: 14px;
  line-height: 200px;
}

方法4：定位（top:50%；left:50%）+margin

前提：
父元素有固定宽高，子元素有固定宽高
子div上下居中：top:50%;margin-top:-h/2; 或是 bottom:50%;margin-bottom:-h/2;
子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2；

//css代码
.container {
  background-color: pink;
  width: 100%;
  height: 400px;
  position: relative;
}
.content-center {
  background-color: brown;
  position: absolute;
  bottom: 50%;
  margin-bottom: -50px;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

方法5：定位（top: 0;bottom: 0;left: 0 right: 0;）+margin: auto;

定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），
并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。
父元素有固定宽高，子元素有固定宽高
父div标记下定位（position:relative|absolute|fixed|sticky）;
子div绝对定位（position:absolute）
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto

 

//css代码
.container {
  background-color: pink;
  width: 100%;
  height: 400px;
  position: relative;
  box-sizing: border-box;
}
.content-center {
  background-color: brown;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

方法6：弹性盒子display: flex;

前提：浏览器兼容性支持
弹性盒子，自带的一个居中功能

 

//css代码
.container {
  background-color: pink;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
}
.content-center {
  background-color: brown;
}

方法7：利用表格单元格的垂直居中属性vertical-align。

父div外层配置一个div，同时设置为表格元素 (display: table)，宽度为100%
父div配置为表格单元格元素 (display: table-cell)
父div配置居中属性（vertical-align: middle），使子div上下居中
子div通过margin配置左右居中（margin-left:auto; margin-right:auto）

 

//html代码
  <div class="container">
    <div class="content-lrcenter">
      <div class="son-updown_center">
        <span>你看我居中了吗</span>
        <span>居中了请留下你的小星星</span>
      </div>
    </div>
  </div>


//css代码
.container {
  background-color: pink;
  display: table;
  width: 100%;
}
.content-lrcenter {
  background-color: brown;
  /*width: 100%; 见备注1，默认会是100%*/
  height: 400px;
  display: table-cell;
  vertical-align: middle;
}
.son-updown_center {
  width: 100px;
  height: 100px;
  margin: auto;
  background-color: orange;
}

备注：
1、表格单元格比较特殊，如果只有一个单元格时，它的宽度默认会占父级（table|tr）宽度的100%;
2、table默认宽度不会撑开，需要手动配置width:100%；