我是新来的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