面試題里有時(shí)還會(huì)強(qiáng)調(diào) 子盒子寬高是否已知，要注意一下
嘗試一：給父盒子設(shè)置padding 或者子盒子設(shè)置margin
<style>
.father{
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
width: 100px;
height: 100px;
margin: auto;
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
失敗，只能水平居中，垂直不可以?。。。。。?！
原因
http://t.csdn.cn/AOMJ1
http://t.csdn.cn/cFsg6
margin:auto為什么不垂直居中
margin:auto是具有強(qiáng)烈計(jì)算意味的關(guān)鍵字，用來(lái)計(jì)算元素對(duì)應(yīng)方向上應(yīng)該獲得的剩余空間大小。
行內(nèi)元素margin:auto; 不能水平居中在一行的中央位置（行內(nèi)元素不獨(dú)占一行）。
塊級(jí)元素設(shè)置寬度后仍占據(jù)一行空間，因此margin:auto;會(huì)將這一行的剩余空間平均分配給左右外邊距。
margin:auto 能使塊級(jí)元素水平居中，但是不能垂直居中，因?yàn)榇怪狈较蛏夏J(rèn)沒有剩余的空間。
注：行內(nèi)元素margin:auto既不能水平居中也不能垂直居中，因?yàn)樾袃?nèi)元素水平垂直方向上默認(rèn)都沒有剩余的空間。
解一：子絕父相+margin:auto+四周是0(子有寬高
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
/* !!!! */
top:0;
left:0;
bottom:0;
right:0;
margin: auto;
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
但這種情況不適用于 子盒子 不定寬高 的情況，例如子盒子會(huì)盛滿整個(gè)父盒子
嘗試二：子絕父相+margin-top/left:50%+transform
子盒子 寬高已知
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
/* !!!! */
margin-top: 50%;
margin-left: 50%;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
如果你以為這個(gè)方法可以通用，那你就錯(cuò)了，因?yàn)?/p>
margin和padding無(wú)論left還是right還是top還是bottom都是相對(duì)于父元素的width的,若如果沒有，找其父輩元素的寬度，均沒設(shè)寬度時(shí)，相對(duì)于屏幕的寬度。
http://t.csdn.cn/Pwcy6
http://t.csdn.cn/YSubI
所以說(shuō)，嘗試一，給父盒子加padding，根本不行，父盒子的padding參考body的大小，所以就把父盒子撐大了
所以不要試padding了!!!
解二:子絕父相+margin-left/top:父盒子一半+transform（子定寬高
<style>
.father{
position: relative;
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
position: absolute;
width: 100px;
height: 100px;
/* !!!! */
margin-top: 100px;
margin-left: 150px;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
<body>
<div class="father">
<div class="son">aa</div>
</div>
</body>
解三:子絕父相+top/left:50%+transform（子不定寬高
子盒子可以 不定寬高
<style>
.father{
position: relative; /* !!!! */
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
position: absolute; /* !!!! */
width: 100px;
height: 100px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #d8db7b;
}
</style>
解四：子絕父相+top/left:50%+magin-top/left: 負(fù) 子一半（子寬高已知
也就是把transform: translate(-50%,-50%); 替換成margin-top: -50px;margin-left: -25px;所以，子盒子寬高已知
<style>
.father{
position: relative;
width: 300px;
height: 200px;
overflow: hidden; /* 放坑爹現(xiàn)象，不信你刪了試試 */
background-color: #db7b7b;
}
.son{
position: absolute;
width: 50px; /* !!!! */
height: 100px;
top: 50%;
left: 50%;
/* transform: translate(-50%,-50%); */
margin-top: -50px;
margin-left: -25px;
background-color: #d8db7b;
}
</style>
flex
父盒子flex布局，并設(shè)置justify-content: center; align-items: center;
<style>
.father{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
background-color: #d8db7b;
}
</style>
table - cell
將父盒子設(shè)置display: table-cell; 并設(shè)置text-align: center; vertical-align: middle; 子盒子設(shè)置display: inline-block;
http://t.csdn.cn/cmr2B
<style>
.father{
display: table-cell;
text-align: center;
vertical-align: middle;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
display: inline-block;
background-color: #d8db7b;
}
</style>
grid
父盒子設(shè)置為網(wǎng)格元素display: grid; 并設(shè)置 place-items: center;
<style>
.father{
display: grid;
place-items: center;
width: 300px;
height: 200px;
background-color: #db7b7b;
}
.son{
background-color: #d8db7b;
}
</style>
總結(jié)：
1.試方法要多個(gè)栗子，不能只試正方形，這樣就發(fā)現(xiàn)不了margin依據(jù)父的寬度
2.子盒子不定寬高，只能設(shè)置top/left:50%，不能設(shè)置margin-left:50%，是因?yàn)?code>top/left:50%不像margin都參照父的width文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-699359.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-699359.html
到了這里，關(guān)于【css面試題】 實(shí)現(xiàn)一個(gè)盒子的水平豎直居中對(duì)齊效果的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
