css中垂直水平居中的實現(xiàn)方法有哪些？這個問題可能是我們?nèi)粘W習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供日土網(wǎng)站建設、日土做網(wǎng)站、日土網(wǎng)站設計、日土網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、日土企業(yè)網(wǎng)站模板建站服務，十多年日土做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。
一、使用absolute(Absolute Centering)
1.1 具體代碼如下：
重慶分公司
重慶分公司
.container {
position: relative;
}
.absolute_center {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 50%;
height: 50%;
margin: auto;
padding: 20px;
overflow: auto;
}
- 該方法的核心思想是是使用絕對定位布局，使當前元素脫離正常的流體特性，而使用absolute的流體特性
1.2 該方法的核心思想是：
使用absolute進行定位布局，脫離正常的塊狀元素流體特性，而通過absolute的流體特性完成垂直水平居中。
這里有兩個基本知識點需要知道：
1.流體特性：
塊狀水平元素，如div元素，在默認情況下（非浮動、絕對定位等），水平方向會自動填滿外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，實際內(nèi)容區(qū)域會響應變窄；
2.absolute流體特性：
默認是不具有流體特性的，而是在特定條件下才具有，而這個條件就是"對立方向同時發(fā)生定位的時候"，即left與right為水平方向定位，top與bottom為垂直方向定位，而當對立方向同時具有定位數(shù)值的時候，absolute的流體特性就發(fā)生了。
1.3 優(yōu)缺點：
優(yōu)點：
1.兼容性好，absolute流體特性IE7就兼容了，可兼容所有現(xiàn)代瀏覽器；
2.沒有額外的標記html元素，樣式簡單；
3.內(nèi)容的寬度以及高度寫法支持使用百分比以及min-/max-寫法；
4.對圖像文件也同樣支持；
缺點：
1.必須定義內(nèi)容的高度；
2.必須增加overflow屬性來阻止如果內(nèi)容的文本高度超出外層容器時出現(xiàn)的溢出情況；
二、負值外補洞法(negative margins)
這可能是目前最常用的方法，在元素的高度以及寬度是固定數(shù)值的時候，通過設置該元素為相對布局脫離文檔流，并設置top: 50%; left: 50%;，使用margin-left以及margin-top使元素完全居中。
2.1 具體代碼如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Negative {
position: absolute;
width: 300px;
height: 200px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -120px;
background-color: cornsilk;
}
2.2 該方法的核心思想是：
使用相對布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用margin來控制偏移量。
這里有有個注意點：
當使用box-sizing:border-box屬性的時候，偏移量是不需要計算border以及padding的。
2.3 優(yōu)缺點：
優(yōu)點：
1.兼容性好，包括IE6-IE7
2.沒有額外的標記html元素，代碼量少；
缺點：
1.非響應式的，不能配合百分比以及min-/max-使用；
2.必須增加overflow屬性來阻止如果內(nèi)容的文本高度超出外層容器時出現(xiàn)的溢出情況；
3.當元素使用box-sizing:border-box和使用默認的content-box偏移量是不一樣的，需要重新計算；
三、使用Transforms
3.1 具體代碼如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.is-Transformed {
width: 50%;
margin: auto;
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: darkseagreen;
}
- 該方法的核心思想是使用相對布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用translate來控制偏移量
3.2 該方法的核心思想是：
使用相對布局，并使用top以及l(fā)eft使內(nèi)容置于容器中心部位，再使用transform來控制偏移量。
3.3 優(yōu)缺點：
優(yōu)點：
1.內(nèi)容寬度以及高度自適應，可以不指定內(nèi)容的寬度以及高度;
2.代碼量少
缺點：
1.兼容性差了點，由于transform不兼容IE8,所以只支持IE9及其以上的現(xiàn)代瀏覽器；
2.為了兼容各種瀏覽器，需要些額外的css前綴；
3.如果元素有使用transform屬性，可能會影響到其他的變換效果；
4.在有些時候會出現(xiàn)邊緣模糊的情況，這是瀏覽器渲染的問題，尤其是使用了transform-style: preserve-3d屬性的時候
四、使用Table-Cell
這可能是最好的垂直居中的方案，但存在一個最大的問題，需要額外的html元素，要使用table-cell完成垂直居中效果需要3個元素來完成。
4.1 具體代碼如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Table {
display: table;
}
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
padding: 20px;
background-color: deepskyblue;
}使用table-cell完成垂直水平居中
@import "./absolute_center4.png"{width="50%"}
4.2 該方法的核心思想是：
使用表格來實現(xiàn)垂直居中，再使用margin: 0 auto;來實現(xiàn)水平居中。
具體操作步驟如下：
1.設置父元素為塊級表格；
2.設置子元素為表格單元格；
3.給子元素添加vertical-align:middle屬性,此單元格已實現(xiàn)垂直居中；
4.設置子元素中的內(nèi)容的寬度，添加margin: 0 auto;屬性，使子元素水平居中。
4.3 優(yōu)缺點：
優(yōu)點：
1.內(nèi)容高度自適應；
2.如果子元素的內(nèi)容溢出，會拉伸父元素的高度；
3.兼容性好，兼容到IE8；
缺點：
1.完成一個垂直居中效果，需要3個html元素；
五、使用Inline-block
這也是一種常用的垂直水平居中的方法，但會存在一個問題：當內(nèi)容的寬度大于容器寬度-0.25em的時候，會發(fā)生內(nèi)容上移到頂部的方法，所以需要一些小的技巧來避免這樣的問題。
5.1 具體代碼如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Inline {
text-align: center;
overflow: auto;
}
.container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
background-color: greenyellow;
padding: 20px;
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}使用inline-block完成水平垂直居中
5.2 該方法的核心思想是：
和table有點類似，設置內(nèi)容為inline-block塊，設置vertical-align: middle;屬性使元素垂直方向居中，再父容器設置text-align:center;使子元素水平方向居中；
優(yōu)：
1、內(nèi)容高度自適應；
2.如果子元素的內(nèi)容溢出，會拉伸父元素的高度；
3.兼容性好，兼容到IE7；
缺：
1.依賴margin-left：-0.25em來矯正水平方向居中的誤差；
2.內(nèi)容的寬度必須小于容器的寬度減去0.25em。
六、使用Flexbox
彈性布局是當前移動端比較流行的布局方式，它可以很優(yōu)雅的完成垂直水平居中效果。
6.1 具體代碼如下：
.container {
position: relative;
width: 100%;
height: 100%;
background-color: aliceblue;
}
.container.is-Flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.center_block {
background-color: wheat;
padding: 20px;
}使用flexbox完成水平垂直居中
6.2 該方法的核心思想是：
使用彈性布局，align-items: center;使元素在側(cè)軸方向居中（默認是垂直方向），justify-content: center;使元素在主軸方向居中（默認是水平方向）;
6.3 優(yōu)缺點：
優(yōu)：
1.內(nèi)容寬度、高度自適應,即便文本溢出也很優(yōu)雅；
2.可以使用很多彈性布局的新特性；
缺：
1.兼容性比較差，目前只有IE10以上兼容；
2.需要寫額外的兼容性前綴；
3.各個瀏覽器的表現(xiàn)可能會有一些差異；
感謝各位的閱讀！看完上述內(nèi)容，你們對css中垂直水平居中的實現(xiàn)方法有哪些大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關文章內(nèi)容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
