与CSS垂直和水平对齐（中间和中心）[重复]

Question

此问题已经在这里有了答案：

• How to center an element horizontally and vertically19个答案

[我正在练习CSS，我对如何强制将div元素置于页面的中心（vertically和horizontally）感到困惑（这是与跨浏览器兼容的一种或多种方法？

最诚挚的问候！

Answer 1

有很多方法：

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描述了两种在水平和垂直方向上居中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。

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