我正在尝试将 div 与 class 居中spinner，它们都在<li>标签内。
我试图居中的 div 包含使用 spin.js 的动画加载器。
我似乎无法让样式top: -50%正常工作，但如果我使用 firebug 并删除样式并再次添加它似乎可以工作。
希望有人能看到我错了。
已编辑
Flexslider 将创建需要居中的 div。
下面是一个工作示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="charset=utf-8">
<title>Gallery</title>
<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" type="text/css" media="screen" />
<style type="text/css">
body {
background-color: #222222;
margin-top: 20px;
margin-bottom: 20px;
}
.copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999;
}
a {
font-size: 12px;
color: #999;
}
.flexslider .slides il {
margin-right: 10px;
}
#gallery_wrap {
margin-left: auto;
margin-right: auto;
width: 713px;
}
#slider, #carousel {
background-color: #000000;
border: 4px solid #000000;
}
#slider {
margin-bottom: 10px;
}
#slideshow_controls {
margin-left: 5px;
margin-bottom: 5px;
}
#carousel img {
height: 70px;
}
#slider img {
max-width: 713px;
max-height: 550px;
}
#carousel_wrap {
width: 713px;
}
#carousel .slides > li {
margin-right: 5px;
cursor: pointer;
}
#slideshow_controls img {
width: 40px;
height: 40px;
cursor: pointer;
}
.spinner {
position: fixed;
top: -50%;
left: 50%;
}
</style>
</head>
<body>
<div id="gallery_wrap">
<div id="slider" class="flexslider">
<ul class="slides">
<li>
<img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" />
</li>
<li>
<img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" />
</li>
</ul>
</div>
<div id="slideshow_controls"><img title="Play slide show" src="./images/play_white_btn.png" /></div>
<div id="carousel_wrap">
<div id="carousel" class="flexslider">
<ul class="slides">
<li>
<img src="http://ichef.bbci.co.uk/naturelibrary/images/ic/credit/640x395/l/la/lake/lake_1.jpg" />
</li>
<li>
<img src="http://aspiringbackpacker.com/wp-content/uploads/2012/10/plitvice1.jpg" />
</li>
</ul>
</div>
</div>
</div>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- FlexSlider -->
<script defer src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<!-- Spin.js -->
<script src="http://fgnass.github.io/spin.js/dist/spin.js"></script>
<!--<script src="http://fgnass.github.io/spin.js/jquery.spin.js"></script>-->
<script type="text/javascript">
$(window).load(function(){
var opts = {
lines: 11, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 18, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#FFF', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '100', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var spinner = new Spinner(opts).spin();
$('#slider li').append(spinner.el);
var opts2 = {
lines: 11, // The number of lines to draw
length: 10, // The length of each line
width: 5, // The line thickness
radius: 10, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#FFF', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var spinner2 = new Spinner(opts2).spin();
$('#carousel li').append(spinner2.el);
$('#carousel').flexslider(
{
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 114,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider(
{
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
</script>
</body>
</html>
任何帮助都会很棒。