無法在引導行中居中div

Question

我無法將此div class =「light」居中放置在引導行中。我試過使用.center-block和.text-center。這是我的HTML和CSS。它讓我想要一個圓球。

<div class = "container lightcontainer"> 
     <div class = "row"> 
       <div class = "col-xs-12"> 
        <div class = "light"></div> 
       </div> 
     </div> 
    </div> 


.light { 
    display: none; 
    width: 100px; 
    height: 100px; 
    background-color: #fff; 
    z-index: 10; 
    box-shadow: 
     inset 0 0 50px #fff,  /* inner white */ 
     inset 20px 0 80px #f0f, /* inner left magenta short */ 
     inset -20px 0 80px #0ff, /* inner right cyan short */ 
     inset 20px 0 300px #f0f, /* inner left magenta broad */ 
     inset -20px 0 300px #0ff, /* inner right cyan broad */ 
     0 0 50px #fff,   /* outer white */ 
     -10px 0 80px #f0f,  /* outer left magenta */ 
     10px 0 80px #0ff; 
    position: absolute; 
    top: 0; 
    left: 0; 
    border-radius: 40%; 
    margin: 0 auto; 
} 

Answer 1

嘗試增加left: 0; right:0px; margin: 0 auto;到類.light用於對準該對中心和風格的父DIV用於使用變換和頂部

.light { 
 
    // display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #fff; 
 
    z-index: 10; 
 
    box-shadow: 
 
     inset 0 0 50px #fff,  /* inner white */ 
 
     inset 20px 0 80px #f0f, /* inner left magenta short */ 
 
     inset -20px 0 80px #0ff, /* inner right cyan short */ 
 
     inset 20px 0 300px #f0f, /* inner left magenta broad */ 
 
     inset -20px 0 300px #0ff, /* inner right cyan broad */ 
 
     0 0 50px #fff,   /* outer white */ 
 
     -10px 0 80px #f0f,  /* outer left magenta */ 
 
     10px 0 80px #0ff; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right:0px; 
 
    border-radius: 40%; 
 
    margin: 0 auto; 
 
     
 
} 
 

 
.light-holder{ 
 
    position: fixed; 
 
    width:100%; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class = "container lightcontainer"> 
 
     <div class = "row"> 
 
       <div class = "col-xs-12 light-holder"> 
 
        <div class = "light"></div> 
 
       </div> 
 
     </div> 
 
    </div>

Answer 2

要居中元件豎直對準的：

.centered { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    /* bring your own prefixes */ 
    transform: translate(-50%, -50%); 
} 

REF：How To Center an Object Exactly In The Center

.light { 
 
    //display: none; 
 
    width: 100px; 
 
    height: 100px; 
 
    top: 50vh; 
 
    background-color: #fff; 
 
    z-index: 10; 
 
    box-shadow: inset 0 0 50px #fff, /* inner white */ 
 
    inset 20px 0 80px #f0f, /* inner left magenta short */ 
 
    inset -20px 0 80px #0ff, /* inner right cyan short */ 
 
    inset 20px 0 300px #f0f, /* inner left magenta broad */ 
 
    inset -20px 0 300px #0ff, /* inner right cyan broad */ 
 
    0 0 50px #fff, /* outer white */ 
 
    -10px 0 80px #f0f, /* outer left magenta */ 
 
    10px 0 80px #0ff; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    border-radius: 40%; 
 
    margin: 0 auto; 
 
} 
 

 
.centered { 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    /* bring your own prefixes */ 
 
    transform: translate(-50%, -50%); 
 
}

<div class="container lightcontainer"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 centered"> 
 
     <div class="light"></div> 
 
    </div> 
 
    </div> 
 
</div>