Question

我想在div标签的中心显示幻灯片放映，我将其标记为黑色。但现在它显示在左上角。

 .slide{background-image:url("samples.jpg") ;
        background-size: 100% ;
    background-repeat: no-repeat;
    height:500px; 
  border-style: solid;
    border-width: 5px;
 }
 .point_556492{
 padding:45px,0px;  
border-style: solid;
    border-width: 5px;
   float: center;
   height:150px;
   border-style: solid;
    border-width: 5px;
    width:50%;
 }

<div class="slide">
       <div class="point_556492"> sample</div>
             
     </div>

Answer 1

假设您将div垂直居中和水平。

注意......这适用于任何大小的内部div。

＆＃13;

.slide {
    background-image:url("samples.jpg");
    background-size: 100%;
    background-repeat: no-repeat;
    height:500px;
    border-style: solid;
    border-width: 5px;
    position: relative;
}
.point_556492 {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%); /* add your required prefixes */
    padding:45px 0px;
    border-style: solid;
    border-width: 5px;
    /* float: center; no such property */
    height:150px;
    border-style: solid;
    border-width: 5px;
    width:50%;

}

＆＃13;

<div class="slide">
    <div class="point_556492">sample</div>
</div>

＆＃13;

Answer 2

一般情况下，我建议使用flexbox或Paulie_D的解决方案，但如果您需要支持旧版浏览器，这里有一个不同的解决方案，将这些样式添加到您的内部div：

position:relative;
top: 50%;
margin: -75px auto; /* half the height of inner div */

PRO：支持IE8等旧版浏览器。如果你需要那个 CON：你需要知道内部或外部div的高度来相应地设置你的边距。如果你知道另一个div的高度，你必须稍微调整一下这个例子。

以下是基于您的代码的完整示例

＆＃13;

 .slide{background-image:url("samples.jpg") ;
    background-size: 100% ;
    background-repeat: no-repeat;
    height:500px; 
    border-style: solid;
    border-width: 5px;
 }
 .point_556492{
   position: relative;
   top: 50%;
   margin: -75px auto;
   padding:45px,0px;  
   border-style: solid;
   border-width: 5px;
   height:150px;
   border-style: solid;
   border-width: 5px;
   width:50%;
 }

＆＃13;

<div class="slide">
  <div class="point_556492"> sample</div>
</div>

＆＃13;

Answer 3

将position:relative添加到.slide，这样您就可以将.point_556492集中在其中，方法是给它一个绝对位置0和自动边距。

＆＃13;

 .slide{background-image:url("samples.jpg") ;
    background-size: 100% ;
    background-repeat: no-repeat;
    height:500px; 
    border-style: solid;
    border-width: 5px;
    position:relative;                /* <- add this */
 }
 .point_556492{
    padding:45px,0px;  
    border-style: solid;
    border-width: 5px;
    /* float: center; */              /* <- remove this */
    position:absolute;                /* <- position absolutely */
    top:0; right:0; bottom:0; left:0; /* <- at zero all around */
    margin:auto;                      /* <- so the auto margin will centre it both horizontally and vertically */
    height:150px;
    border-style: solid;
    border-width: 5px;
    width:50%;
 }

＆＃13;

<div class="slide">
    <div class="point_556492"> sample</div>
</div>

＆＃13;

Answer 4

请尝试此操作 - margin:0 auto

<div class="slide">
<div class="point_556492" style="margin:0 auto;"> sample</div>
</div>

在中心显示幻灯片div

4 个答案: