CSS水平垂直居中

參考：https://blog.csdn.net/weixin_37580235/article/details/82317240

一、水平居中

1.1 行內(nèi)元素

對于行內(nèi)元素，可以將父級元素設置為塊級元素，并給父元素設置 text-align: center;

<div id="father">
  <span id="son">我是行內(nèi)元素，我要水平居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  text-align:center;
}
</style>

效果：
span水平居中.png
1.2 塊級元素
1.2.1 寬度固定(方案一)

需要給誰居中，就給誰設定margin:0 auto; 不需要設置position也可實現(xiàn)。

<div id="father">
  <div id="son">我是塊級元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
}
#son{
  background:skyblue;
  width:300px;
  height:200px;
  margin:0 auto;  
  text-align:center;
}
</style>

效果圖：
固定寬度div水平居中.png
1.2.2 寬度固定(方案二)

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；
設置絕對子元素的 margin-left: -元素寬度的一半px; 或者設置transform: translateX(-50%);

<div id="father">
 <div id="son">我是塊級元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
 height:100%;
 background:pink;
 position:relative;
}
#son{
 background:skyblue;
 width:300px;
 height:200px;
 position:absolute;
 left: 50%;
 margin-left: -150px;
 /*或者transform: translateX(-50%);*/
 text-align:center;
}
</style>

效果圖：
固定寬度div水平居中.png
1.2.3寬度不定(方案一)

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的left:50%，即讓子元素的左上角水平居中；
利用css3新增屬性transform: translateX(-50%);

<div id="father">
  <div id="son">我是塊級元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  text-align:center;
  position:relative;
}
#son{
  background:skyblue;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  text-align:center;
}
</style>

效果圖：
寬度不定div水平居中.png
1.2.4 寬度不定(方案二)

默認子元素的寬度和父元素一樣，這時需要設置子元素為display: inline-block; 或 display: inline;即將其轉換成行內(nèi)塊級/行內(nèi)元素，再給父元素設置 text-align: center;

<div id="father">
  <div id="son">我是塊級元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}

#father{
  height:100%;
  background:pink;
  text-align:center;
}
#son{
  background:skyblue;
  margin:0 auto;  
  text-align:center;
  display:inline;
}

效果圖：
不定寬度div水平居中.png
1.2.5寬度隨意

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; justify-content: center;

<div id="father">
  <div id="son">我是塊級元素，我要水平居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background:pink;
  display: flex;
  justify-content: center;
}
#son{
  background:skyblue;
  text-align:center;
}
</style>

效果圖：
flexbox布局水平居中.png

二、垂直居中

2.1 行內(nèi)元素
2.1.1單行

只需要設置單行行內(nèi)元素的"行高等于盒子的高"即可；

<div id="father">
  <span id="son">我是單行行內(nèi)元素，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:200px;
  background-color:pink;
  line-height:200px;
}
#son{
  background-color:skyblue;
}
</style>

效果圖：


單行行內(nèi)元素垂直.png
2.1.2 多行

使用給父元素設置display:table;子元素設置：display:table-cell和vertical-align: middle;屬即可；

<div id="father">
  <span id="son">我是多行行內(nèi)元素，我要垂直居中<br>我是多行行內(nèi)元素，我要垂直居中</span>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father{
  height:100%;
  background-color:pink;
  display:table;
}
#son{
  background-color:skyblue;
  vertical-align:middle;
  display: table-cell;
}
</style>

效果圖：
多行行內(nèi)元素垂直居中.png

可以發(fā)現(xiàn)父元素的背景會一直被子元素遮住。所以在這里仍存疑。

2.2 塊狀元素
2.2.1固定高度(使用定位)

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中。
設置絕對子元素的 margin-top: -元素高度的一半px; 或者設置transform: translateY(-50%);

<div id="father">
  <div id="son">我是塊級元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position: relative;
}
 
#son {
    height: 100px;
    background-color: skyblue;
    position: absolute;
    top: 50%;
    margin-top: -50px;
       //transform: translateY(-50%)
}
</style>

效果圖：
固定高度div垂直居中.png
2.2.2不定高度(使用定位)

首先設置父元素為相對定位，再設置子元素為絕對定位，設置子元素的top: 50%，即讓子元素的左上角垂直居中。
設置絕對子元素transform: translateY(-50%);

<div id="father">
  <div id="son">我是塊級元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position: relative;
}
#son {
    background-color: skyblue;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
</style>

效果圖：
不定高度div垂直居中.png
2.2.3 高度隨意(使用flexbox布局)

使用flexbox布局，只需要給待處理的塊狀元素的父元素添加屬性 display: flex; align-items: center;

<div id="father">
  <div id="son">我是塊級元素，我要垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    display: flex; 
    align-items: center;
}
 
#son {
    background-color: skyblue;
}
</style>

效果圖：
flex布局垂直居中.png

三、水平垂直居中

3.1 塊級元素
3.1.1 寬高固定(方案一)

設置父元素為相對定位，給子元素設置絕對定位，再設置top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<div id="father">
  <div id="son">我是塊級元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    width:300px;
    height:300px;
    background-color: skyblue;
    position:absolute;
    top: 0; right: 0; bottom: 0; left: 0; margin: auto;
}
</style>

效果圖：
寬高固定水平垂直居中.png
3.1.3 寬高固定(方案二)

設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; margin-left: --元素寬度的一半px; margin-top: --元素高度的一半px;

<div id="father">
  <div id="son">我是塊級元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    width:300px;
    height:300px;
    background-color: skyblue;
    position:absolute;
    left: 50%; top: 50%; margin-left: -150px; margin-top: -150px;
}
</style>

效果圖：
寬高固定水平垂直居中.png
3.1.2 寬高不定

設置父元素為相對定位，給子元素設置絕對定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<div id="father">
  <div id="son">我是塊級元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    position:relative;
}
 
#son {
    background-color: skyblue;
    position:absolute;
    left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
}
</style>

效果圖：
寬高不定div水平垂直居中.png
3.1.4寬高隨意(使用flex布局)

設置父元素為flex定位，justify-content: center; align-items: center;

<div id="father">
  <div id="son">我是塊級元素，我要水平垂直居中</div>
</div>
<style>
html,body{
width:100%;
height:100%;
margin: 0;
padding:0;
}
#father {
    height: 100%;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
#son {
    background-color: skyblue;
}
</style>

效果圖：
flex布局div水平垂直居中.png
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容