css水平&&垂直居中面试必备（完整demo）css的"水平垂直居中"样式，虽然是老生常谈啦，但是还是要理理清楚，就当温

css的"水平垂直居中"样式，虽然是老生常谈啦，但是还是要理理清楚，就当温故而知新啦！本文直接提供完整代码，个人强烈建议亲自敲一遍，加深记忆。

一、水平&&垂直居中

基础样式代码

为了方便测试，先提供如下图所示的含基础样式的完整demo代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平&&垂直居中</title>
  <style>
    .father{
      width: 300px;
      height: 100px;
      background-color: #eee;
      border:1px solid #111;
      overflow: hidden;
    }
    .child{
      width: 50px;
      height: 50px;
      background-color: yellow;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>

1，使用flex实现

在基础样式代码上补充如下代码：

.father{    
    display: flex;  // 如果父元素context是行业块级元素，这里修改为display: inline-flex;
    justify-content: center;
    align-items: center;
}

2，使用flex+margin实现

在基础样式代码上补充如下代码：

.father{    
    display: flex;
}
.child{
    margin: auto;
}

3，使用position+transform实现

在基础样式代码上补充如下代码：

.father{    
    position: relative;  //如果父元素不添加此样式代码，child会找到最近含position属性的body上
}
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

4，使用position+calc实现

在基础样式代码上补充如下代码：

.father{    
    position: relative;
}
.child{
    position: absolute;
    top: calc(50% - 26px);  // 这里的26为子元素child的高的一半+上下边框和的一半
    left: calc(50% - 26px); // 这里的26为子元素child的宽的一半+左右边框和的一半
}
// 为了更明显的看出区别：可将子元素child的宽高修改为width:290px,height:90px;完整child样式如下：
.child{
    width: 290px;
    height: 90px;
    background-color: yellow;
    border: 1px solid blue;
    position: absolute;
    top: calc(50% - 46px);
    left: calc(50% - 146px);
}

5，使用position实现

在基础样式代码上补充如下代码：

.father{    
    position: relative;
}
.child{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

6，使用vertical+display实现

在基础样式代码上补充如下代码：

.father{    
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.child{
    display: inline-block;
    vertical-align: middle;
}

在实际开发中，移动端常使用flex和transform来实现水平垂直居中，而pc端根据浏览器兼容性选择性使用。代码兼容性可访问 caniuse 进行查询。

二、水平居中

基础样式代码

<!DOCTYPE html><html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>水平居中</title>
  <style>
    .father{
      width: 300px;
      height: 100px;
      background-color: #eee;
      border:1px solid #111;
    }
    .child{
      width: 240px;
      height: 50px;
      background-color: yellow;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>

1，text-align

注：子元素必须是行内元素或行内块级元素；

在基础样式代码上补充如下代码：

.father{
    text-align: center;
}
.child{
    display: inline-block;
}

2，margin+display:block

在基础样式代码上补充如下代码：

.child{
    margin: 0 auto;
    display: block; // 必须是块级元素
}

3，margin+display:table

在基础样式代码上补充如下代码：

.child{
    display: table;
    margin: 0 auto;
}

4，flex

在基础样式代码上补充如下代码：

.father{
    display: flex;
    justify-content: center;
}

5，position+transform

在基础样式代码上补充如下代码：

.father{
    position: relative;
}
.child{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

6，position+calc

在基础样式代码上补充如下代码：

.father{
    position: relative;
}
.child{
    position: absolute;
    left: calc(50% - 121px);  // 121 = 240/2 + (左右两边框宽度和)/2
}

7，position

在基础样式代码上补充如下代码：

.father{
   position: relative;
}
.child{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0 auto;
}

三、垂直居中

基础样式代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>垂直居中</title>
  <style>
    .father{
      width: 300px;
      height: 100px;
      background-color: #eee;
      border:1px solid #111;
    }
    .child{
      width: 240px;
      height: 50px;
      background-color: yellow;
      border: 1px solid blue;
    }
  </style>
</head>
<body>
  <div class="father">
    <div class="child"></div>
  </div>
</body>
</html>

1，flex

在基础样式代码上补充如下代码：

.father{
    display: flex;
    align-items:center;
}

2，line-height

注：子元素必须是行内元素

在基础样式代码上补充如下代码：

.father{
    line-height: 100px; // 跟height的值一样
}
.child{
    display: inline;  // 与宽高不共存
    /*
    width: 240px;
    height: 50px;
    */
}

3，position+transform

在基础样式代码上补充如下代码：

.father{
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

4，position+calc

在基础样式代码上补充如下代码：

.father{
    position: relative;
}
.child{
    position: absolute;
    left: calc(50% - 26px);  // 26 = 50/2 + (上下两边框宽度和)/2
}

5，position

在基础样式代码上补充如下代码：

.father{
   position: relative;
}
.child{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   margin: auto 0;
}

6，vertical+display:table-cell

在基础样式代码上补充如下代码：

.father{
    display: table-cell;
    vertical-align: middle;
}
.child{
    vertical-align: middle;
}

小结

只要熟悉掌握了水平垂直居中的整体样式布局代码，无论水平居中还是垂直居中就简单多了。在实际开发中，满足兼容性的情况下，代码量越少越好。