<div style="width:600px;heigth:600px"><!--這個(gè)是父元素-->????<div class="son"><!--這個(gè)是子元素-->????????<h1 class="title">hello word</h1>????????<div class="content">這里面是一堆元素</div>????</div></div>知道父元素的寬度和height，直接通過(guò)css寫的width和height， 子元素沒(méi)有通過(guò)style設(shè)置width和height，而是通過(guò)子元素中內(nèi)部的元素將其撐開(kāi)來(lái)計(jì)算的。如何讓這個(gè)子元素居中？測(cè)試過(guò)的失敗的方法????margin-top:50%; margin-top:-50%; ? ?margin-top的百分?jǐn)?shù)是根據(jù)父元素的width計(jì)算的。父元素 position:relative; 子元素position:absolute;top:0;right:0;bottom:0;left:0 失敗，子元素如果不設(shè)置width和height就會(huì)直接繼承到父元素的width和height，而不是通過(guò)內(nèi)容撐開(kāi)的寬度和高度。父元素position:relative;子元素position:absolute:top:50%; ?子元素里面加一層div設(shè)置position:absolute;top:-50%;top百分比里是根據(jù)父元素設(shè)定，子元素absolute，父元素繼承不到高度。父元素position:relative;子元素position:absolute:top:50%; ?子元素里面加一層div設(shè)置position:relative;top:-50%;這個(gè)最接近正確的答案，但是還是是錯(cuò)誤的，在chrome的盒子模型里面已經(jīng)顯示出了relative的偏移量，但是渲染的時(shí)候并沒(méi)有被渲染出來(lái)，top-50%；無(wú)效果。最后一個(gè)方法我沒(méi)試，但應(yīng)該沒(méi)問(wèn)題，不過(guò)這樣做的話容易出錯(cuò)，我這個(gè)網(wǎng)頁(yè)上鐵定是有視頻的。因?yàn)樽釉厥潜粨伍_(kāi)的，所以在子元素的里面再加一層div，然后設(shè)置overflow:hidden; ? bfc。然后通過(guò)js獲取到這個(gè)div的高度，給子元素設(shè)置偏移量。但這樣可能會(huì)出問(wèn)題，window.onload 的前提是網(wǎng)頁(yè)上內(nèi)容加載完畢，但是如果在有視頻的情況下則會(huì)等到視頻被加載完畢才會(huì)觸發(fā)window.onload，因此不能用window.onload來(lái)實(shí)現(xiàn)，最多就是把js放到body標(biāo)簽結(jié)束地方的前面，但是可能會(huì)出現(xiàn)訪問(wèn)的時(shí)候類似于圖片渲染（或者加載）速度慢的情況下，會(huì)導(dǎo)致獲取到的js的值不正確。我想的是最好能使用純css來(lái)實(shí)現(xiàn)這個(gè)子元素的垂直居中 ? ?大神 ?快出來(lái)啊
5 回答
已采納
業(yè)余奶茶品鑒師
TA貢獻(xiàn)260條經(jīng)驗(yàn) 獲得超388個(gè)贊
給父元素加css樣式
display:?flex;
?align-items:?center;
就可以實(shí)現(xiàn)垂直居中。
望采納
-
咕咕問(wèn)ie8下不可用
慕用4288045
TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超2個(gè)贊
<!DOCTYPE HTML>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ? <title>Html和CSS的關(guān)系</title>
? ? <style type="text/css">
? ? .father{
? ? ? ? width:600px;
? ? ? ? height:600px;
? ? ? ? background:red;
? ? ? ? display:table-cell;
? ? ? ? vertical-align:middle;
? ? }
? ??
? ? .son{
? ? ? ? text-align:center;
? ? ? ? height:100px;
? ? ? ? background:blue;
? ? ? ??
? ? }
? ??
? ? </style>
? ??
? ? </head>
? ? <div class="father"><!--這個(gè)是父元素-->
? ? <div class="son"><!--這個(gè)是子元素-->
? ??
? ? ? ? <h1 class="title">hello word</h1>
? ? ? ? <div class="content">這里面是一堆元素</div>
? ? ?
? ? </div>
</div>
</html>
紅色為父元素，藍(lán)色為子元素，藍(lán)色必須設(shè)置了定高才能垂直居中，不知道是不是你想要的效果。
qq_奈奈奈_03699702
TA貢獻(xiàn)19條經(jīng)驗(yàn) 獲得超5個(gè)贊
.parent{
????line-height:600px;
????text-align:center;
?}
.child{
????display:inline-block;
????text-align:left;
????line-height:normal;
????vertical-align:middle;
?}還有一種方式是絕對(duì)定位，用margin-left,margin-top負(fù)值調(diào)整。
也可以用justify-content:center;
??????????????? align-items:center
-
咕咕問(wèn)你的代碼試了一下，只能水平居中，不能垂直居中。
-
qq_奈奈奈_03699702*{padding: 0;margin: 0;} .parent{ line-height: 300px; text-align: center; background-color: #ccc; } .child{ display: inline-block; line-height: normal; vertical-align: middle; text-align: left; } <div class="parent"> <div class="child"> <p class="title">hello word</p> <div class="content">這里面是一堆元素</div> </div> </div>
-
咕咕問(wèn)水平居中 垂直未居中
添加回答
舉報(bào)
0/150
提交
取消