0

我需要将 div 位置设为绝对位置并使其居中，但我使用并没有做到这一点。我已经疯了，试图让它到中心。我曾尝试使用左右值为 0。它应该使 div 自动居中。需要弄清楚出了什么问题？

请帮忙！

这是我尝试过并卡住的代码

.slider-wrap {
    width: 1000px; 
    height: 500px; 
    left: 0; 
    right: 0; 
    top: 100px;
    background: #096; 
    z-index: 99; 
    margin: 0 auto;
}
4

4 回答 4

2

您忘记将位置设置为绝对

 .slider-wrap {
    width: 1000px; 
    height: 500px; 
    left:0; right:0; 
    top:100px; 
    background:#096; 
    z-index:99; 
    margin:0px auto;
}

添加position:absolute;

 .slider-wrap {
    position:absolute;
    width: 1000px; 
    height: 500px; 
    left:0; right:0; 
    top:100px; 
    background:#096; 
    z-index:99; 
    margin:0px auto;
 }
于 2013-08-14T08:13:31.880 回答
0

试试这个应该可以正常工作。

显示：块；

于 2014-07-17T13:20:53.273 回答
0

使 div 居中的正确方法如下：

.slider-wrap {
...
margin-right: auto;
margin-left: auto;
}

另请注意，除非您设置属性z-index，否则它将不起作用。positionIE：position: absolute;

于 2013-08-14T08:22:33.903 回答
0

您需要添加position: absolute;到您的 css 以进行绝对定位。

注意：还要添加position: relative;到您希望用作包装器的父元素。

例如：

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    ...
}

.slider-wrap {
    position: absolute;
    ...
}

100% 的宽度和高度是可选的，只需添加它以防您希望容器占用整个剩余空间或整个页面（如果它位于开始正文标记之后）...

 
要将滑块环绕定位在屏幕的中心（因此水平和垂直居中），请尝试以下操作：

html, body {
    width: 100%;
    height: 100%;
}

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    ...
}

.slider-wrap {
    position: absolute;
    width: 1000px; 
    height: 500px;

    top: 50%;
    left: 50%;
    margin-top: -250px; // half the height
    margin-left: -500px; // half the width
    ...
}

 
如果您能够使滑动条显示与 eg 内联display: inline-block;（请记住浏览器支持这一点），那么您可以使用以下内容：

.slider-container {
    position: relative;
    width: 100%;
    height: 100%;

    text-align: center; // this one makes the slider-wrap center horizontally
    ...
}

.slider-wrap {
    position: relative;
    display: inline-block;
    width: 1000px; 
    height: 500px;

    vertical-align: middle; // this one does the vertical centering
    ...
}

 
另一种选择是使用display: table-cell;. 和上一个差不多：

.slider-container {
    position: relative;
    display: table;
    width: 100%;
    height: 100%;

    text-align: center;
    ...
}

.slider-wrap {
    position: relative;
    display: table-cell;
    width: 1000px; 
    height: 500px;

    vertical-align: middle;
    ...
}

 
也line-height: ?px;将使垂直居中成为可能。但我认为这个答案现在已经足够长了:-P

试试看。摆弄这个直到你对结果感到满意:-)

于 2013-08-14T08:34:40.930 回答