2011-03-24 126 views

回答

66

有许多方法:元件的固定措施

CSS

<div style="width:200px;height:100px;position:absolute;left:50%;top:50%; 
margin-left:-100px;margin-top:-50px;"> 
<!–content–> 
</div> 

  1. 中心的水平和垂直对齐。中心水平和文字

    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> 
    

    这里更多:Horizontal and Vertical Alignment in CSS

+0

上午我错了?我选择的解决方案2,它似乎并没有与Firefox的工作:) – nXqd 2013-04-03 11:59:57

4

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(); 
}); 

这里有一个demo of the techniques in practice

+1

如果OP不需要使用jQuery? – 2011-03-24 15:25:27

+0

有一个CSS示例,就在jQuery示例之上。如果OP不想使用jQuery,那么jQuery示例也可以修改为直接使用javascript,并且需要将大小未知的div放在中间。 – Greg 2011-03-24 15:26:02

1

这并不像人们所期望的那样容易 - 如果你知道容器的高度,你只能做垂直对齐。如果是这种情况,你可以用绝对定位来完成。

概念是将顶部/左侧位置设置为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) */ 
    } 
+0

当然,如果您不知道容器的高度,则可以始终使用JavaScript来计算高度,然后使用JS设置边距。 – RussellUresti 2011-03-24 15:20:00

1

现在有一个更好的解决方案:Vertical align anything with just 3 lines of CSS

+0

这种技术将垂直居中放置在元素内部的文本,但是如果您希望主要元素垂直和水平居中关于视口。 – JohnnyBizzle 2017-10-11 15:37:33

+0

请参阅:https://stackoverflow.com/a/47260122/7186739 – Super 2018-02-13 09:38:56