Question

我正在练习CSS而且我很困惑如何强迫我的div元素在我的页面中居中（垂直和水平）（意味着跨浏览器兼容性的方式或方式）？

祝你好运！

Answer 1

有很多方法：

具有固定尺寸的元素的中心水平和垂直对齐

<强> CSS

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

2。水平和垂直居中一行文字

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

Answer 2

This blog post描述了两种水平和垂直居中的方法。一个只使用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。

Answer 3

此网站提供了垂直居中div的一些选项：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Answer 4

这并不像人们想象的那么容易 - 如果你知道容器的高度，你真的只能进行垂直对齐。如果是这种情况，你可以用绝对定位来做。

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

Answer 5

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

垂直和水平对齐（中间和中间）与css

5 个答案: