整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>過以下CSS樣式代碼實現水平方向居中布局效果
.parent{display:table-cell;vertical-align:middle;}優點:
瀏覽器的兼容性比較好
缺點:
vertical-algin屬性具有繼承性, 導致父級元素的文本也是居中顯示的
面布局中最常見的需求就是元素或者文字居中了，但是根據場景的不同，居中也有簡單到復雜各種不同的實現方式，本篇就帶大家一起了解下，各種場景下，該如何使用 CSS 實現居中
頁面布局中最常見的需求就是元素或者文字居中了，但是根據場景的不同，居中也有簡單到復雜各種不同的實現方式，有的特定場景下可能還有一些稀奇古怪的bug，本篇就帶大家一起了解下，各種場景下，該如何使用 CSS 實現居中
根據應用場景，我們把居中的需求分為與盒子相關的居中和內容相關的居中，盒子相關的居中比較好理解，也是我們比較常見的應用場景，內容相關實際也很常用，只是平時注意得比較少，但如果對概念理解不清晰，實現出來的效果可能經常會偏差那么一丟丟，然后就開始窮舉法解決問題了，這里也是我們本次討論的重點
盒子模型相關的居中基本上可以根據盒子有沒有給定寬高度分為分為兩大類
我們先預設一下頁面結構設置樣式
<div class="parent">
<div class="children"></div>
</div>給定寬高的場景比較簡單，能獲取到元素的寬高那么直接計算子元素需要的偏移量就可以了，或者借助表格元table-cell現居中，但是大部分時候我們遇到的場景是不確定，并且不確定的解決方案可以向下兼容給定寬高的，這里就不過多贅敘了，直接看下一種情況
寬高不固定時，主流的解決方案有兩種，一種是使用彈性布局，另一種是使用定位
.parent {
display: flex;
justify-content: center;
align-items: center;
}.children {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}基本現在瀏覽器對彈性布局的支持已經很好了，也是主流的居中解決方案，放心用即可
提到內容，最常想到的就是文字，圖片，icon這些，這些元素的對齊大部分時候都是根據基準線來實現的baseline，可以使用設置行高line-height（這種方案有瑕疵，后面會詳細介紹），文字居中屬性text-align來實現，當然也可以轉換成彈性布局來實現居中，都是可以的
這里我們舉一個稍微特殊點的案例來進行分析，看應該如何進行居中
結構
<div class="parent">
<span class="children1">HelloWorld</span>
<span class="children2">世界你好</span>
</div>樣式
.parent {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.children1 {
font-size: 42px;
background-color: red;
}
.children2 {
font-size: 18px;
background-color: yellow;
}.parent {
display: flex;
justify-content: center;
align-items: center;
}簡單省心，達到效果
.parent {
line-height: 100px;
text-align: center;
}這個時候就會發現，水平方向使用text-align來居中沒有問題，但是垂直方向出來的效果就和預想的有偏差了，我們先來分析為什么會這樣
line-height 等于元素高度的時候文本并不是真的居中了，而是看著居中了，當元素高度和font-size差距較大的時候，這種不是真正的居中就越發的明顯
line-height，指的是兩行文字基線之間的距離（這說法實際有點爭議，也可以字面理解就行的高度），如果 line-height 剛好等于盒子的高度，那么意味著基線就在盒子一半的位置，這樣就實現了內容的垂直居中
我們在用line-height實現文字垂直居中的時候，有個前提，一個是單行元素，另外沒有多種內聯元素（不同大小的圖片，文字，icon等等），不然你會在對齊內聯元素的時候遇到很多麻煩
那么如何解決這個問題呢，首先要了解，行內元素在垂直方向的定位，是基于什么，先來看一張圖，可能大家在其它地方也看過，輔助我們理解
在父元素定義了line-height的條件下，vertical-align的作用是讓（inline/inline-block）子元素依據父元素的基點對齊。
根據上圖示意，不難看出，不管文字的大小，它們都是基于基線（baseline）來確定垂直方向的定位（可看helloWorld和世界你好的底部是在同一水平線的）
看到這里有的同學應該就想到了，可以通過設置vertical-align修改對齊方式不就好了嗎？我們來試試先把世界你好的設置下vertical-align: middle試一試
可以看到耶，為什么沒有效果，這時可能同學就要急了，但先別急，你在把HelloWorld也設置一下試試
.children1 {
font-size: 42px;
background-color: red;
vertical-align: middle;
}
.children2 {
font-size: 24px;
background-color: yellow;
vertical-align: middle;
}這個時候效果就出來了，怎么樣，是不是很神奇~
我們再來一起看 vertical-align
vertical-align 屬性設置元素的垂直對齊方式。該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊
如果我們只設置一個元素的 vertical-align 屬性的化，那么就是后設置的和前面的對齊，我們可以把這兩個大小字體調換下順序，然后單獨給HelloWorld設置middle
可以看到這個字體是有點向下偏移一點點，原因就是這時它是跟小字號的baseline對齊了
我們同樣把兩個都設置成middle再看下
這時就正常啦~簡單總結一下，就是在使用vertical-align這個屬性進行垂直對齊居中時，一定要注意，如果有多個元素，一定要保證他們的基準線是一致的，這樣才能達到我們想要的效果
者 | 開課吧無憂
編輯 | 開三金
來源 | 開課吧前端團隊（ID:KKBWeb）
經常碰到有同學在問，如何讓一個元素上下左右都居中呢？
相信大家在面試的時候也會經常碰到這個問題，一下列出來幾種方式以供大家參考，如有不足之處，請大家補充
問題描述：
給定兩個元素，這兩個元素是父子級關系。
并且兩個元素的大小都是不確定的，那么這時候如何讓子級在父級中上下左右都居中？（暫且設定父級比子級要大一些）
先上代碼及效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>思路：父級相對定位，子級絕對定位 而四個定位屬性的值都設置了0；
那么這時候如果子級沒有設置寬高，則會被拉開到和父級一樣寬高。
而現在設置了子級的寬高，所以寬高會按照我們的設置來顯示；
但是實際上子級的虛擬占位已經撐滿了整個父級，這時候再給它一個margin：
auto它就可以上下左右都居中了
先上代碼，效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：父級相對定位，子級絕對定位，而top，left這兩個屬性的如果給百分比；
那么這個百分比則是相對于父級的寬高來進行計算的；
如果只給定這兩個值，則子級的右上角會和父級的中心點對齊，得到下圖：
這時候則需要進一步操作：
css3中的位移屬性，則是根據自身來計算百分比的；
所以只需要利用這個屬性把自身再往左上角各移動50%就可以讓子級在父級中上下左右都居中了
代碼及效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
text-align: center;
}
.content:before{
content: '';
height:100%;
width:0;
display: inline-block;
vertical-align: middle;
}
.box{
width:100px;
height:40px;
background: #f0a238;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>思路：
首先，把子級轉換成內聯塊元素，那么左右居中就可以直接利用text-align:center搞定了，而這個方法難點就在上下居中上。
子級是一個內聯塊元素，當然不可能說給父級設置一個行高子級就乖乖的上下居中了。
所以需要更加復雜的操作：
首先給子級設置垂直對齊方式：vartical-align 這個屬性只對內聯元素以及內聯塊元素起作用；
它有這么些值：top,bottom,middle等等 我想這些值的意思就不需要我解釋了。
但是這個屬性有一個缺點：需要一個參照物，也就是說如果父級里面有兩個子元素，兩個子元素都設置了vertical-align:middle，那么得到的效果只是這兩個元素之間居中對齊而已。
并不會把兩個子元素都放在父級的中間。
小技巧一：把其中一個元素設置高度百分百，那么這時候另一個元素就會處于父級上下居中的位置了。
如圖：
但是這時候就多出來了一個元素了，與需求不符。
當然了，如果說你在實際布局中，確實有兩個元素，并且其中一個元素可以設置為高度百分百的話，這么做是可以的。
小技巧二：想辦法把另一個元素消除掉——利用偽元素before，詳情請看代碼。
tips：其實這時候給父級設置一個和父級高度一樣的行高也是可行的，不過這個原理太復雜，大家有興趣可以研究一下哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>效果圖就不看了吧，思路感覺也沒啥可解釋的，這都是css3的功勞，沒啥技巧，掌握了彈性盒模型就能掌握這個方法，簡單粗暴。
快去看看彈性盒模型吧，以后我有時間心情好的話再專門寫點這方面的東西
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: grid;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>這個方法和彈性盒模型一樣，簡單粗暴，沒啥可說的。
grid網格布局出來沒多久，權當做個了解吧，不過這玩意很強大，大家有時間可以了解一下。
Good Luck ！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
