回答
有许多方法:元件的固定措施
CSS
<div style="width:200px;height:100px;position:absolute;left:50%;top:50%;
margin-left:-100px;margin-top:-50px;">
<!–content–>
</div>
- 中心的水平和垂直对齐。中心水平和文字
CSS
<div style="width:400px;height:200px;text-align:center;line-height:200px;"> <!–content–> </div>
3的垂直一条线。中心的元素的水平和垂直对齐,没有具体措施
CSS
<div style="display:table;height:300px;text-align:center;"> <div style="display:table-cell;vertical-align:middle;"> <!–content–> </div> </div>
This blog post介绍中心一个div两种方法在水平和垂直。一个只使用CSS,并将与具有固定大小的div一起工作;另一个使用jQuery,并将预先为您不知道大小的div工作。
我复制从博客帖子的演示这里的CSS和jQuery的例子:
CSS
假设你有一个类.classname的DIV,下面的CSS应该工作。
left:50%; top:50%;
将div的左上角设置为屏幕中心; margin:-75px 0 0 -135px;
将其移动到左侧,并分别向上移动固定大小div的宽度和高度的一半。
.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
jQuery的
$(document).ready(function(){
$(window).resize(function(){
$('.className').css({
position:'absolute',
left: ($(window).width() - $('.className').outerWidth())/2,
top: ($(window).height() - $('.className').outerHeight())/2
});
});
// To initially run the function:
$(window).resize();
});
如果OP不需要使用jQuery? – 2011-03-24 15:25:27
有一个CSS示例,就在jQuery示例之上。如果OP不想使用jQuery,那么jQuery示例也可以修改为直接使用javascript,并且需要将大小未知的div放在中间。 – Greg 2011-03-24 15:26:02
这并不像人们所期望的那样容易 - 如果你知道容器的高度,你只能做垂直对齐。如果是这种情况,你可以用绝对定位来完成。
概念是将顶部/左侧位置设置为50%,然后使用负边距(设置为高度/宽度的一半)将容器拉回到居中位置。
例子:http://jsbin.com/ipawe/edit
基本CSS:
#mydiv {
position: absolute;
top: 50%;
left: 50%;
height: 400px;
width: 700px;
margin-top: -200px; /* -(1/2 height) */
margin-left: -350px; /* -(1/2 width) */
}
当然,如果您不知道容器的高度,则可以始终使用JavaScript来计算高度,然后使用JS设置边距。 – RussellUresti 2011-03-24 15:20:00
本网站给出了垂直居中的DIV一些选项:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
该网站也提供了一个水平对齐的例子。 – JWC 2011-03-24 15:25:45
现在有一个更好的解决方案:Vertical align anything with just 3 lines of CSS
这种技术将垂直居中放置在元素内部的文本,但是如果您希望主要元素垂直和水平居中关于视口。 – JohnnyBizzle 2017-10-11 15:37:33
请参阅:https://stackoverflow.com/a/47260122/7186739 – Super 2018-02-13 09:38:56
- 1. css垂直和水平对齐问题
- 2. CSS整页垂直和水平对齐
- 3. css:垂直和水平对齐,IE
- 4. CSS:垂直和水平对齐文本?
- 5. CSS/jQuery垂直和水平中心DIV
- 6. CSS垂直和水平中心Div
- 7. Div水平中心和垂直中间
- 8. 在html/css中水平和垂直居中对齐文本
- 9. 如何对齐DIV垂直和水平中心
- 10. 在CSS按钮中垂直和水平对齐文本
- 11. div的水平和垂直对齐
- 12. 即使垂直和水平对齐flexbox
- 13. Bootstrap 4 - 水平和垂直对齐
- 14. 垂直和水平对齐DIV
- 15. 如何水平和垂直对齐?
- 16. 位置中心水平和垂直
- 17. CSS:水平和垂直居中文本?
- 18. 垂直和水平对齐容器和容器中的内容
- 19. 在div中水平和垂直对齐图像和文本
- 20. 垂直和水平对齐CSS旋转后的文本
- 21. 垂直对齐和水平对齐问题
- 22. CSS代码中心水平和垂直按钮
- 23. CSS垂直对齐圆圈中心
- 24. CSS中心垂直对齐div
- 25. 在导航中对齐文本(水平和垂直)
- 26. 水平和垂直居中对齐DIV电网
- 27. 在Bash中垂直和水平对齐文字
- 28. Kivy TextInput水平和垂直对齐(居中文本)
- 29. 如何在水平LinearLayout中垂直对齐EditText和ProgressBar?
- 30. 如何在div中水平和垂直对齐元素
上午我错了?我选择的解决方案2,它似乎并没有与Firefox的工作:) – nXqd 2013-04-03 11:59:57