将固定位置的div水平居中

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

我想从顶部100px的div，并水平居中。

<!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>

来源

2014-01-17 jmenezes

你试过左：50％;或什么？ –

我做过了，但它仍然不在中心位置（我现在正在使用Firefox）。 – jmenezes

您需要在其上放一个负边距，即div的一半宽度。然后它将被集中。 –

保持它简单：

left : 25%; 
right : 25%;

Running example

来源

2014-01-17 12:56:40

它的宽度固定为'50％'。他可能想要另外定义它。 – Jerska

不是在问题中，但你可能是对的。然后@FabrizioCalderan解决方案不再矫枉过正，应该使用。屏幕中心减去项目的一半。 –

如果div有特定宽度尝试补充一点：

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

见例如：http://jsfiddle.net/NZX38/

来源

2014-01-17 12:55:06

如果你解决它的宽度，任意值（可以是百分比），你可以像这样做：

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

如果用百分比去，这是更简单：

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

工作小提琴：JSFiddle

来源

2014-01-17 12:55:12 Jerska

@Danko不，你可以在我的小提琴中看到。不与'位置：固定'。有些情况下，你想要这个定位，并仍然希望它居中。 – Jerska

在这里你去。

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

希望这有助于。

来源

2014-01-17 12:56:08 Nitesh

，如果你事先不知道你的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

来源

2014-01-17 12:56:39 fcalderan

这个非常棒！但是'CSS3'是必需的。 – Jerska

它适用于所有现代浏览器。对于较老的浏览器（IE <9），您可以通过条件注释 – fcalderan

+1使用不同的风格/优雅降级（例如'width：50％'），CSS3不是问题。 –

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：喜欢你可以看到，如果您设置的高度，你可以居中垂直太;）（但你并不需要它:)）

来源

2014-01-17 13:05:12

使用动态jQuery代码为中心的股利

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

来源

2014-01-17 13:06:45

如果不需要，应该避免使用javascript，如果有更简单的css解决方案。 – fcalderan

将固定位置的div水平居中

回答

相关问题