水平居中&垂直居中

在用html設計計算器時，對於水平居中和垂直居中很不解，查了一些資料，下面這篇博文內容充實，通俗易懂，我很快就get到了精髓，在閱讀以前我先貼上幾張作計算器的代碼截圖，用案例說明一下水平居中的 含義：

要讓#keys表明的按鍵鈕空間水平居中，它是塊級元素，就能夠把它的父元素中設置margin：15px auto;

 

 

 

 

目錄

水平居中 

    行內元素

    塊級元素

    方案一：(分寬度定不定兩種狀況)

    方案二：使用定位屬性 

    方案三：使用flexbox佈局實現（寬度定不定均可以）

 

垂直居中

    單行的行內元素

    多行的行內元素

     塊級元素

水平垂直居中

    已知高度和寬度的元素

   未知高度和寬度的元素

    方案一：使用定位屬性

    方案二：使用flex佈局實現

 

水平居中 

行內元素
首先看它的父元素是否是塊級元素，若是是，則直接給父元素設置 text-align: center; 

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>

<div id="father">
    <span id="son">我是行內元素</span>
</div>
若是不是，則先將其父元素設置爲塊級元素，再給父元素設置 text-align: center;

<style>
#father {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>

<span id="father">
    <span id="son">我是行內元素</span>
</span>
效果：

 

 塊級元素
方案一：(分寬度定不定兩種狀況)
定寬度：須要誰居中，給其設置 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>
效果：

 

 不定寬度：默認子元素的寬度和父元素同樣，這時須要設置子元素爲display: inline-block; 或 display: inline;即將其轉換成行內塊級/行內元素，給父元素設置 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>
效果：（將#son轉換成行內元素，內容的高度撐起了#son的高度，設置高度無用）

 

方案二：使用定位屬性
首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的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>
效果：

 

方案三：使用flexbox佈局實現（寬度定不定均可以）
使用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>
效果： 

 

垂直居中
單行的行內元素
只須要設置單行行內元素的"行高等於盒子的高"便可；

<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
}

#son {
background-color: green;
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>
效果：

 

 塊級元素
方案一：使用定位
首先設置父元素爲相對定位，再設置子元素爲絕對定位，設置子元素的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佈局實現（高度定不定均可以）
使用flexbox佈局，只須要給待處理的塊狀元素的父元素添加屬性 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定位，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>
效果：

---------------------
做者：杜媛媛
來源：CSDN
原文：https://blog.csdn.net/weixin_37580235/article/details/82317240
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

http://www.javashuo.com/article/p-nfgsqawn-dd.html