整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
老板的手機收到一個紅包，為什么紅包沒居中？
如何讓一個子元素在父容器里水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。
你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規范，經不起千錘百煉。換句話說：這些人也就面試的時候夸夸其談，但真的上戰場的時候，他們不敢這么寫，也不知道怎么寫最靠譜。
這篇文章中，我們來列出幾種常見的寫法，最終你會明白，哪種寫法是最優雅的。
當然，我還會拿出實際應用中的真實場景來舉例，讓你感受一下標準垂直居中的魅力。
首先給圖片添加一個div，設置其寬高及基本屬性，其次把div中的display元素設置成flex，最后給img添加align-items:center屬性，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style tpye="text/css">
body{
background:#000
}
div{
width: 900px;
height: 800px;
background:deeppink;
display: flex;
align-items: center;
}
div img{
width: 579px;
height: 282px;
align-items: center;
}
</style>
</head>
<body>
<div>
<img src="html.png" alt="">
</div>
</body>
</html>看下效果
首先創建一個div，以及對有圖片的div設置樣式，給img的父級添加一個diaplay，并且屬性為table，并且把包含圖片的div中的display屬性設置成table-cell，最后給有圖片的div設置成vertical-align: middle; 屬性，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style tpye="text/css">
body{
background: #bbb;
}
div{
display: table;
width: 900px;
height: 700px;
background: #f3f3f3;
display: table-cell;
vertical-align: middle;
}
div img{
width: 282px;
}
</style>
</head>
<body>
<div>
<img src="html.png" alt="">
</div>
</body>
</html>效果圖：
擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
如果一個元素已經設置好了寬高值，那么要讓它在body或者div容器中垂直水平居中，那或許不困難，例如：使用負margin值實現就是最簡單常用的方式。然而，今天我們要總結的是當一個元素不固定寬高值時，如何讓它垂直水平居中。本篇總結了三個方法。
下面講這三種方法的時候使用的是同一個實例，這個實例的dom結構是這樣的：
使用css3的transform屬性是我們用的最多的一種解決辦法。具體用法看下面這張代碼圖：
使用translate在X，Y方向上各移動-50%。這個移動距離是相對于自身的寬高來動的。
最后的運行效果是這樣的：
這個方法是最好理解的。
這第二種方法是最簡單的方法，它選用flex布局來處理居中。
關鍵的樣式代碼是這樣的：
父元素設置display:flex，直系子元素設置margin:auto。這個時候我們就可以看到，真系子元素不僅在水平方向居中，垂直方向上也是居中的。
效果是這樣的：
這個方法是最簡單的。
第三種方法是使用display:blox布局。相對來說，這個方法稍微復雜了一點，下面我來一解釋，還是上面那個例子的dom結構，如果沒有印象，可以滑到頂部在看看，因為這里我中會解釋css代碼。
關鍵的樣式代碼是這樣子的：
由上圖可以看出，首先我們給body下的第一級dom（class=dialog__mask）設置了box布局。接著設置了兩個box相關的屬性：
-webkit-box-pack:center
-webkit-box-align:center
其中，box-pack表示父容器里面子容器的水平對齊方式。box-align表示父容器里面子容器的垂直對齊方式。這里設置成都是居中的。關于這兩個屬性取其它值的應用狀態，大家可以網上搜一下，很容易理解。這里就不展開來占篇幅了。
然后，說一下div.dialog__box的樣式，box-orient定義了子元素水平擺放。而box-sizing有常用的兩個取值：
取值1、box-sizing：border-box
表示：border和padding計算入width之內。寬度值包含了border和padding值。
取值2、box-sizing：content-box
表示：border和padding不計算入width之內。
這個實例使用了取值1。
最后就是下面有個子元素設置了一個屬性box-flex。來規定box的子元素的空間顯示比例。
最后的效果是這樣的：
這個方法是用處最多的。可以讓子元素呈現各種布局。
寫在最后的總結：
用樣式解決不定寬高元素垂直水平居中的問題，這篇文章給出了三種辦法。每一種辦法都不難理解，而且在移動端使用完全不用擔心兼容性問題。感興趣的可以向我要完整代碼，自己運行一下。
以上純屬個人理解，如有不正確地方，歡迎留言指正。
短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
