div垂直对齐问题

Posted 2023-03-06

【中文标题】div垂直对齐问题

【英文标题】：Div Vertical Align Issue

【发布时间】：2012-10-01 20:00:23

【问题描述】：

如何设置主 div 的中心？我会尝试很多方法，但我做不到。左右好像还行。如何更改垂直位置属性？我试过这些：

margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;

vertical-align:middle;

这些不起作用。

#main 
 
    width:1024px;
    height:600px;
    position:relative;
    z-index:1;
    margin:auto auto;
    text-align: center;


 

【参考方案1】：

工作示例（使用下面教程的方法 2）：http://jsfiddle.net/heAXR/1/

这是一个很好的教程，它展示了几种垂直居中内容的方法： http://blog.themeforest.net/tutorials/vertical-centering-with-css/

我是文章中描述的方法 3 的粉丝，这里有一个演示： http://douglasheriot.com/tutorials/css_vertical_centre/demo5.html

【讨论】：

嘿，谢谢关注。我正在尝试第二种方法，因为它适合我。但它不起作用。我有一个 div，我必须将其设置为中心，仅此而已。我不想与另一个 div 一起工作。 （例如方法3有两个div）

这是方法 2 的示例，您只需要一个 div：jsfiddle.net/heAXR 如果居中的内容在另一个 div 内（10 个案例中有 9 个），请确保父 div有 position: relative 在它的 css 中才能工作。

重新阅读您的问题。这是一个 div 水平和垂直居中的示例：jsfiddle.net/heAXR/1

【参考方案2】：

也许这个教程会对你有所帮助

http://phrogz.net/css/vertical-align/index.html

【参考方案3】：

有margin: 0px auto;的解决方案可以让一个div水平对齐。可以用jquery做垂直对齐。

$(document).ready(function()
   var height = $(window).height();
   var width = $(window).width();
   var mainHeight = $('#main').height();
   var mainWidth = $('#main').width();
   $('#main').css("top" : height/2 - mainHeight/2 ).css( "left" : width/2 - mainWidth/2);
);