CSS水平居中+垂直居中+水平/垂直居中的方法总结
目录
水平居中
1.行内元素
2.块级元素
方案一：(分宽度定不定两种情况)
方案二：使用定位属性
方案三：使用flexbox布局实现（宽度定不定都可以）
垂直居中
1.单行的行内元素
2.多行的行内元素
3.块级元素
水平垂直居中
1.已知高度和宽度的元素
2.未知高度和宽度的元素
方案一：使用定位属性
方案二：使用flex布局实现
————————————————
水平居中
1.行内元素
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 text-align: center;
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
text-align: center;
}
</style>
<div class="father">
<div class="son">我是行内元素</div>
</div>
如果他的父元素不是块级元素就要给父元素设置成块元素，然后在给父元素设置text-align:center;
<style>
.father {
display:block;
width:300px;
height:300px;
background-color: skyblue;
text-align: center;
}
</style>
<div class="father">
<div class="son">我是行内元素</div>
</div>
效果：
image.png
2.块级元素
方案一：是否定宽度两种方案：
定宽度：需要谁居中，给其设置 margin: 0 auto; （作用：使盒子自己居中）
<style>
.father {
width:300px;
height:300px;
background: skyblue;
}
.son {
width:100px;
height:100px;
background:red;
margin:0 auto;
}
</style>
<div class="father">
<div class="son">我是行内元素</div>
</div>
效果：
image.png
不定宽：默认子元素的宽度和父元素一样，这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素，给父元素设置 text-align: center;
<style>
.father {
width:300px;
height:300px;
background: skyblue;
text-align: center;
}
.son {
display:inline;
background:red;
}
</style>
<div class="father">
<div class="son">我是行内元素</div>
</div>
效果：（将#son转换成行内元素，内容的高度撑起了#son的高度，设置高度无用）
image.png
方案二：使用定位属性
首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的left:50%，即让子元素的左上角水平居中；
定宽度：设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
position:relative;
}
.son {
width:100px;
height:100px;
background: pink;
position:absolute;
left:50%;
margin-left:-50px;
}
</style>
<div class="father">
<div class="son">我是块级元素</div>
</div>
不定宽度：利用css3新增属性transform: translateX(-50%);
效果：
image.png
方案三：使用flexbox布局实现（宽度定不定都可以）
使用flexbox布局，只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
display:flex;
justify-content: center;
}
.son {
width:100px;
height:100px;
background: pink;
}
</style>
<div class="father">
<div class="son">我是块级元素</div>
</div>
垂直居中
1.单行的行内元素
只需要设置单行行内元素的"行高等于盒子的高"即可；
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
}
.son {
line-height: 300px;
background: pink;
}
</style>
<div class="father">
<span class="son">我是块级元素</span>
</div>
效果：
image.png
2.多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;属即可；
<style>
.father {
width:300px;
height:300px;
background-color: skyblue;
display:table-cell;
vertical-align:middle;
}
.son {
background: pink;
}
</style>
<div class="father">
<span class="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>
效果：
image.png
