如何在css中居中元素？

Question

.komunikat{
position: fixed;
top: 50%;
left: 50%;
width: 500px;
background-color:#FFF;
padding:10px;
border:5px solid #CCC;
font-size: 12px;
color: #fff;
border-radius: 10px;
border: 1px #0099cc outset;
font-family: Arial, Verdana, sans-serif;
background: #000000; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #000000 0%, #050505 6%, #0f0f0f 22%, #141414 26%, #1c1c1c 36%, #1e1e1e 40%, #232323 46%, #262626 52%, #2d2d2d 62%, #303030 67%, #333333 72%, #333333 77%, #353535 83%, #383838 89%, #353535 94%, #383838 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#000000), color-stop(6%,#050505), color-stop(22%,#0f0f0f), color-stop(26%,#141414), color-stop(36%,#1c1c1c), color-stop(40%,#1e1e1e), color-stop(46%,#232323), color-stop(52%,#262626), color-stop(62%,#2d2d2d), color-stop(67%,#303030), color-stop(72%,#333333), color-stop(77%,#333333), color-stop(83%,#353535), color-stop(89%,#383838), color-stop(94%,#353535), color-stop(100%,#383838)); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* IE10+ */
background: radial-gradient(ellipse at center, #000000 0%,#050505 6%,#0f0f0f 22%,#141414 26%,#1c1c1c 36%,#1e1e1e 40%,#232323 46%,#262626 52%,#2d2d2d 62%,#303030 67%,#333333 72%,#333333 77%,#353535 83%,#383838 89%,#353535 94%,#383838 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#383838',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
box-shadow: 0px -1px 3px rgba(0, 0, 0, 0.5);
z-index: 4;
}

这是我在css中的comunicat代码。我想使用jquery，设置所有元素的margin-top（.komunikat），但我不能，这里是jquery的代码：

<script>
var comunicats = $('.komunikat');
for (i = 0; i < comunicats.length; i++) {
    comunicats[i].css( "margin-top", '-' + comunicats[i].height() );
}
</script> 

我该如何解决？

编辑： 这是工作代码，Mr_Green有权利，我没有添加'px'：

<script>
var comunicats = $('.komunikat');
for (i = 0; i < comunicats.length; i++) {
    comunicats.eq(i).css("margin-top", '-' + comunicats.eq(i).height()+'px');
}
</script>

Answer 1

这样做：

var comunicats = $('.komunikat');
for (i = 0; i < comunicats.length; i++) {
    comunicats.eq(i).css( "margin-top", '-' + comunicats.eq(i).height() );
}

Answer 2

亲爱的

如果你使用

.komunikat {
    position: fixed;
    top: 50%;
    left: 50%;
}

你应该添加这个

transform: translate(-50%, -50%);

否则不居中。

希望你能尝试使用这个

祝你好运

Answer 3

尝试

var comunicats =$('.komunikat');

或使用

$('.komunikat').each(function(index){
 comunicats[index].css( "margin-top", '-' + comunicats[index].height()+'px' );
});