CSS样式水平居中、垂直居中、水平垂直居中父元素不是块级元素，则先利用display:block将其父元素设置为块级元素

水平居中

水平居中分为行内元素水平居中、块级元素水平居中

行内元素水平居中

原理：text-align只控制行内内容(文字、行内元素、行内块级元素)如何相对他的块父元素对齐

父元素是块级元素，则直接给父元素设置 text-align: center

.parent {
    text-align:center
}
<div class="parent">
    <span id="son">我是行内元素</span>
</div>

父元素不是块级元素，则先利用display:block将其父元素设置为块级元素，再给父元素设置 text-align: center。

.parent {
    display: block;
    text-align:center
}
<span class="parent">
    <span id="son">我是行内元素</span>
</span>

块级元素水平居中（与宽度有关）

方案一：宽度确定与宽度无法确定两种

宽度确定：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）

<style>
#father {
    width: 500px;
    height: 300px;
}
 
#son {
    width: 100px;
    height: 100px;
    margin: 0 auto;  ---> margin: 0 auto 0 auto(上下边距为0，左右自适应)
}
</style>
 
<div id="father">
   <div id="son">我是块级元素</div>
</div>

宽度不确定：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline(即将其转换成行内块级/行内元素)，给父元素设置 text-align。 center。

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

方案二：使用定位属性

首先设置父元素为相对定位(position:relative)

再设置子元素为绝对定位(position:absolute),设置子元素的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>

不定宽度：利用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>

方案三：使用flex布局实现（宽度定不定都可以）

使用flex布局，只需要给待处理的块状元素的父元素添加属性 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>

垂直居中

单行的行内元素

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

<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>

块级元素（与高度有关）

方案一：使用定位

首先设置父元素为相对定位(position:relative)

再设置子元素为绝对定位(position:absolute)，设置子元素的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>

方案二：使用flexbox布局实现（高度定不定都可以）

使用flex布局，只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center

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

水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，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>

未知高度和宽度的元素

方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，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布局实现

设置父元素为flex定位，display:flex;justify-content: center; align-items: center

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

CSS样式水平居中、垂直居中、水平垂直居中