<div style="width:600px;heigth:600px"><!--這個是父元素-->????<div class="son"><!--這個是子元素-->????????<h1 class="title">hello word</h1>????????<div class="content">這里面是一堆元素</div>????</div></div>知道父元素的寬度和height，直接通過css寫的width和height， 子元素沒有通過style設置width和height，而是通過子元素中內部的元素將其撐開來計算的。如何讓這個子元素居中？測試過的失敗的方法????margin-top:50%; margin-top:-50%; ? ?margin-top的百分數是根據父元素的width計算的。父元素 position:relative; 子元素position:absolute;top:0;right:0;bottom:0;left:0 失敗，子元素如果不設置width和height就會直接繼承到父元素的width和height，而不是通過內容撐開的寬度和高度。父元素position:relative;子元素position:absolute:top:50%; ?子元素里面加一層div設置position:absolute;top:-50%;top百分比里是根據父元素設定，子元素absolute，父元素繼承不到高度。父元素position:relative;子元素position:absolute:top:50%; ?子元素里面加一層div設置position:relative;top:-50%;這個最接近正確的答案，但是還是是錯誤的，在chrome的盒子模型里面已經顯示出了relative的偏移量，但是渲染的時候并沒有被渲染出來，top-50%；無效果。最后一個方法我沒試，但應該沒問題，不過這樣做的話容易出錯，我這個網頁上鐵定是有視頻的。因為子元素是被撐開的，所以在子元素的里面再加一層div，然后設置overflow:hidden; ? bfc。然后通過js獲取到這個div的高度，給子元素設置偏移量。但這樣可能會出問題，window.onload 的前提是網頁上內容加載完畢，但是如果在有視頻的情況下則會等到視頻被加載完畢才會觸發window.onload，因此不能用window.onload來實現，最多就是把js放到body標簽結束地方的前面，但是可能會出現訪問的時候類似于圖片渲染（或者加載）速度慢的情況下，會導致獲取到的js的值不正確。我想的是最好能使用純css來實現這個子元素的垂直居中 ? ?大神 ?快出來啊
5 回答
已采納
慕用4288045
TA貢獻4條經驗 獲得超2個贊
<!DOCTYPE HTML>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
? ? <title>Html和CSS的關系</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"><!--這個是父元素-->
? ? <div class="son"><!--這個是子元素-->
? ??
? ? ? ? <h1 class="title">hello word</h1>
? ? ? ? <div class="content">這里面是一堆元素</div>
? ? ?
? ? </div>
</div>
</html>
紅色為父元素，藍色為子元素，藍色必須設置了定高才能垂直居中，不知道是不是你想要的效果。
qq_奈奈奈_03699702
TA貢獻19條經驗 獲得超5個贊
.parent{
????line-height:600px;
????text-align:center;
?}
.child{
????display:inline-block;
????text-align:left;
????line-height:normal;
????vertical-align:middle;
?}還有一種方式是絕對定位，用margin-left,margin-top負值調整。
也可以用justify-content:center;
??????????????? align-items:center
-
咕咕問你的代碼試了一下，只能水平居中，不能垂直居中。 -
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>
-
咕咕問水平居中 垂直未居中
- 5 回答
- 0 關注
- 1839 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消