將固定位置的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水平居中

回答

相關問題