Question

我无法将这个div类中心=＆＃34; light＆＃34;在我的引导行中。我尝试过使用.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的样式，以便使用transform和top

进行垂直对齐

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 2

以中心元素：

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

参考：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>

无法在bootstrap行中居div

2 个答案: