使用CSS进行垂直和水平居中对齐（居中）

Question

我对如何强制使我的 div 元素在页面中居中（水平和垂直）感到困惑，有哪些方式可以实现跨浏览器兼容性？

- SilverLight

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>  

---

- Saurabh Gokhale

---

我错了吗？我选择了解决方案2，但似乎在Firefox上不起作用 :) - Dzung Nguyen

Answer 2

这篇博客文章介绍了两种在水平和垂直方向上居中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();
});

这里有一个实践了这些技术的演示。

- Greg

---

如果操作者不需要使用jQuery呢？ - Saurabh Gokhale

在jQuery示例的正上方有一个CSS示例。如果OP不想使用jQuery并且需要居中大小未知的div，则也可以修改jQuery示例以使用纯JavaScript。 - Greg

Answer 3

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

- JWC

---

该网站确实提供了水平对齐的示例。 - JWC

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) */
  }

- RussellUresti

---

当然，如果您不知道容器的高度，您总是可以使用 JavaScript 获取计算出的高度，然后同样使用 JS 设置您的边距。 - RussellUresti

Answer 5

现在有更好的解决方案：只需3行CSS即可垂直对齐任何内容

- nokiko

---

这种技术可以在元素内部垂直居中文本，但如果您想要将主要元素相对于视口在垂直和水平方向上居中呢？ - JohnnyBizzle

请参见：https://stackoverflow.com/a/47260122/7186739 - Billu