ブートストラップ行のdivの中央に配置することはできません

Question

ブートストラップ行にこのdivクラス= "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

センターやスタイルにすることを垂直方向に変換を使用して整列させるための親のdivを整列させるためのクラス.lightにleft: 0; right:0px; margin: 0 auto;を追加しようとすると、中央の要素を最

.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>