我是新來的CSS。我想保持div
始終在屏幕的中心。我知道通過定位我們可以實現它,但只有當我們擁有固定的寬度和高度時。我的要求是什麼,我想要有固定寬度但沒有固定高度的div
。我希望它根據其中的內容使用CSS
進行調整。如何將div始終保持在固定的寬度和100%的高度?
0
A
回答
0
您正在尋找transform: translateY(-50%)
住宅。這裏有一個例子:
.main {
width: 200px;
position: fixed;
background-color: red;
position: fixed;
top: 50%;
left: 0px;
right: 0px;
transform: translateY(-50%);
margin: auto;
}
0
就做這樣的事情,你可以肯定,它將永遠是在中間。
HTML
<div id="outer">
<div id="content"></div>
</div>
CSS
* {
margin: 0 auto; /* centers everything except if otherwise floated
or affected by positioning positioning and margin property values */
}
#outer {
width: 200px;
height: auto;
}
#content {
width: 200px;
height: 100%;
position: absolute;
background-color: green;
bottom: 0;
}
解決方案:包裹在一個沒有問題的DIV浮動的div聽的第一個塊CSS代碼和我迪不要做任何會影響其立場的事情。
相關問題
- 1. 如何獲得100%高度的浮動div始終保持100%
- 2. 保持固定高度的高寬比
- 3. 如何放大100%的頁面寬度圖像以保持固定高度
- 4. 無法將圖像的寬度和高度固定爲100%
- 5. 對齊一個100%的寬度div來固定寬度的div
- 6. 使視頻寬高比保持最大100%寬度和高度
- 7. 打破一個固定寬度的div div寬度變爲100%
- 8. 如何在HTML中將div的寬度/高度設置爲100%
- 9. 100%寬度和固定高度的背景視頻
- 10. Wordpress中的add_image_size - 固定寬度和100%高度
- 11. 動態div高度始終爲100%
- 12. CSS:100%寬度或高度,同時保持寬高比?
- 13. div寬度爲100%,旁邊是固定寬度的
- 14. 如果父母的div也是100%寬度/高度,如何給孩子div寬度/高度100%
- 15. 固定寬度div div寬度div?
- 16. 保持線高度垂直居中div沒有固定高度
- 17. 100%的餘量的高度,同時保持寬度約束DIV在CSS
- 18. ImageElement寬度和高度始終爲零
- 19. 如何保持JFrame的特定寬度和高度?
- 20. 創建具有固定寬度和靈活高度的div
- 21. 100%高度或100%寬度
- 22. CSS:保持固定高度DIV在Firefox和IE
- 23. 保持div的寬高比,並應用最大高度和最大寬度
- 24. 保持在格文本固定寬度
- 25. UIImageView - 固定寬度和靈活高度?
- 26. Jquery - 100%寬度的幻燈片,同時保持高度propotional
- 27. 固定圖像的寬度和高度,但高度被削減
- 28. Div寬度= 100%?
- 29. 在IE9中沒有固定高度/寬度的居中Div
- 30. 縮放div但保持它包含在一定的寬度和高度
嗨,如果你能給我們一個jsFiddle玩一玩,我將不勝感激。 – w3shivers 2014-12-04 07:54:51
是的,它是一個重複的問題:http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div – 2014-12-04 07:57:11