水平居中固定位置的 div答案

【问题标题】：Horizontally center a div with a fixed position水平居中固定位置的 div
【发布时间】：2014-01-17 21:13:19
【问题描述】：

在下面的代码中，如何将一个固定位置的 div 水平居中？我已经尝试了几件事，但没有一个能做到正确。

我试图让 div 距顶部 100 像素，并水平居中。

<!DOCTYPE HTML>
<html>
<head>
<title> New Document </title>
<style type="text/css">
.myDiv {
    position: fixed;
    top:100px;
    left:auto;
    padding:10px;
    background-color: blue;
    color: white;
}
</style>
</head>

<body>
    <div class="myDiv">Something went wrong. God save the Queen!</div>
</body>
</html>

【问题讨论】：

你尝试了剩下的：50%；还是什么？
我做了，但它仍然不在中心（我现在使用的是 Firefox）。
你需要在它上面加上一个负边距，也就是div宽度的一半。然后它将居中。

标签： html css

【解决方案1】：

如果您事先不知道 div 的宽度（或者如果您无法设置），您可以使用 transform 属性：

.myDiv {
    position: fixed;
    ...
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

示例代码：http://codepen.io/anon/pen/fqpwd

【讨论】：

这个太棒了！但是需要CSS3。
它适用于所有现代浏览器。对于较旧的浏览器（IEwidth: 50%）
浏览器可能会，但不幸的是flying saucer 不会。不过，我没有找到任何 CSS 2.1 解决方案。

【解决方案2】：

保持简单：

left  : 25%;
right : 25%;

Running example

【讨论】：

实际上与将其宽度固定为50% 相同。他可能想另外定义它。
不在问题中，但您可能是对的。然后@FabrizioCalderan 解决方案不再是矫枉过正，应该使用。屏幕中心减去项目的一半。

【解决方案3】：

如果您的 div 有特定的宽度，请尝试添加：

width: somevalue;
left: 50%;
margin-left: -somevalue/2;

查看示例：http://jsfiddle.net/NZX38/

【讨论】：

【解决方案4】：

如果你固定它的宽度，任何值（可以是百分比），你可以这样做：

width: 250px;
position: fixed;
left: 50%;
margin-left: -125px; /* 250 / 2 */

如果你使用百分比，那就更简单了：

width: 50%;
position: fixed;
left: 25%; /* (100 - width) / 2 */

工作小提琴：JSFiddle

【讨论】：

@Danko 不，正如您在我的小提琴中看到的那样。不是position: fixed。在某些情况下，您希望此定位但仍希望它居中。

【解决方案5】：

给你。

WORKING DEMO

HTML 代码：

<div class="myDiv">Something went wrong. God save the Queen!</div>

CSS 代码：

.myDiv {
   background-color: #0000FF;
    color: #FFFFFF;
    left: auto;
    margin: 0 auto;
    padding: 10px;
    position: fixed;
    text-align: center;
    top: 100px;
    width: calc(100% - 37px);
}

希望这会有所帮助。

【讨论】：

【解决方案6】：

jsFiddle HERE

你应该设置宽度，这样你就可以在 HTML 中使用它。

<div id="centerme">I'm a div and I wanna stay in the center!</div>

这适用于 CSS。

#centerme{
        position: fixed;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;   
        background:red;
        width:250px;
        height:60px;
    }

PS：就像你可以看到你是否设置了高度，你也可以垂直居中;）（但你不需要它:)）

【讨论】：

【解决方案7】：

使用动态 jquery 代码使 div 居中

HTML：

    <p><button id="button1">click and center the div</button></p>
    <p class="centerDiv"></p>

jquery：

    $("#button1").click(function(){
        function movediv(){
          win_width=$(window).width();
          win_height=$(window).height();
          div_width=$('.centerDiv').width();
          div_height=$('.centerDiv').height();
          $('.centerDiv').css('top',(win_height/2)-(div_height/2)).css('left',(win_width/2)-(div_width/2)).toggle();
        }
        movediv();
        $(window).resize(function(){
    movediv();
    });
});

CSS：

   .centerDiv{
       background-color:red;
       position:absolute;
       width:200px;
       height:100px;
    }

See Fiddle

【讨论】：

javascript 在没有必要且存在更简单的 css 解决方案时应避免使用。