最全css居中：水平居中+垂直居中+水平/垂直居中总结

一.水平居中

1. 行内元素

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center; 
        //看父级是否为块级元素，是则父级设置text-align:center
        //如果不是：父级先设置为块级元素，然后再居中 (即display：block  ；text-align:center;)
       }
</style>
 
<div id="father">
    <span id="son">我是行内元素</span>
</div>

2.块级元素：分宽度是否确定

块级元素宽度确定时：

• margin: 0 auto;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
  设置绝对子元素的 margin-left: -元素宽度的一半px;
  或者设置transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 使用flexbox布局实现（宽度定不定都可以）只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

块级元素宽度不确定

• 默认子元素的宽度和父元素一样则先设置子元素 display: inline-block;然后父元素 text-align: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }
 
    #son {
        background-color: green;
        display: inline;
    }
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；利用css3新增属性transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• table标签配合margin左右auto实现水平居中。
  使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右margin为auto。

二.垂直居中

1.单行的行内元素：用line-height

只需要设置单行行内元素的"行高等于盒子的高"即可；

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
 
    #son {
        background-color: green;
        line-height: 300px;
    }
</style>
 
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

• 多行的行内元素
  使用给父元素设置display:table-cell;和vertical-align: middle;属即可；
  

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }
 
    #son {
        background-color: green;
    }
</style>
 
<div id="father">
    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

2.块级元素：分高度是否确定

方案一：父position：relative 子position:absolute;top:50% ；margin-top:-高度一半px或者transform:translate:Y(-50%)

• 高度确定：首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的top: 50%，即让子元素的左上角垂直居中；定高度：设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 高度不确定：利用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

方案二：父设置 display: flex; align-items: center;

三：水平垂直居中

已知高度和宽度的元素：

• 设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 使用flex布局实现

未知高度宽度

• 设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}
 
    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}
</style>
 
<div id="father">
    <div id="son">我是块级元素</div>
</div>

• 使用flex布局实现
  父级设置display：flex； 子级设置 align-content:center
• table布局，父级转换成表格形式display：table，然后子级设置display：table-cell;vertical-align：middle实现。（需要注意的是：vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素）。

.table{
            width: 500px;
            height: 500px;
            border: 1px solid black;
            display: table
            
        }
        .div2{
            display: table-cell;
            vertical-align: middle;
        }
  <div class="table">
        <div class="div2">hhhhhh</div>
  </div>

拓展：浮动元素居中

方法一：
css：
#container{
  width:400px;
  height:110px;
  border:1px solid black;
}
.left{
  width:100px;
  height:100px;
  float:left;
  position: relative;
  left: 50%;
  transform: translateX(-50%); //未知width 时也可以用  已知宽度时 也可以改为 margin-left：-width/2
  background-color: red;
}
html：
      <div id="container">
            <div class="left">left</div>
        </div>

方法二:在浮动元素外面再嵌套一层div (浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和，否则无法实现真正的水平居中。)
#container{
  width:400px;
  height:110px;
  border:1px solid black;
}
.content{
  width:200px; //浮动元素外层嵌套的div宽度应该设置为浮动元素的宽度之和
   margin: 0 auto;
}
.left{
  width:100px;
  height:100px;
  float:left;
  background-color: red;
}
      <div id="container">
        <div class="content">
          <div class="left">1</div>
          <div class="left">2</div>
        </div>
      </div>