Question

我有一个div，我希望在用户的浏览器中居中。但是，我不能使用“position：fixed”css代码，因为如果缩小浏览器，则不会出现滚动条，允许用户滚动浏览器以查看整个div。

此外，如果我使用“position：fixed”并且用户的屏幕太小，则无法在用户的浏览器中看到部分div。用户也无法滚动查看它。

所以我需要允许用户滚动并查看整个div或找出一种方法来居中div而不使用“position：fixed”。

Answer 1

这应该使用flexbox来完成：

＆＃13;

.flex-container {
  min-height: 100vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3rem; /* optional */
  border: 1px solid red; /* not needed */
}

.flex-center {
  padding: 3rem; /* optional */
  background-color: #787878; /* not needed */
  color: white; /* not needed */
}

body {
  margin: 0; /* not needed */
  padding: 0; /* not needed */
}

＆＃13;

<div class="flex-container">
  <div class="flex-center">I am centered</div>
</div>

<div class="flex-container">
  <div class="flex-center"><p>I am also centered, but I have a lot more content and I should be taller than the deivice width.</p>
    <p>Cat ipsum dolor sit amet, missing until dinner time, and need to chase tail and slap owner's face at 5am until human fills food dish. Play time. You call this cat food? attack feet refuse to drink water except out of someone's glass and groom yourself 4 hours - checked, have your beauty sleep 18 hours - checked, be fabulous for the rest of the day - checked!. Put toy mouse in food bowl run out of litter box at full speed . Eat owner's food kitten is playing with dead mouse so chase mice, but see owner, run in terror for stare out the window yet chase after silly colored fish toys around the house scream at teh bath. Cat not kitten around see owner, run in terror scream at teh bath. Lick the plastic bag scratch leg; meow for can opener to feed me or sniff other cat's butt and hang jaw half open thereafter asdflkjaertvlkjasntvkjn (sits on keyboard), but kitty scratches couch bad kitty for stare at the wall, play with food and get confused by dust flop over. Destroy couch as revenge howl uncontrollably for no reason and lounge in doorway hola te quiero and pelt around the house and up and down stairs chasing phantoms cat is love, cat is life. Scamper meow loudly just to annoy owners for friends are not food but rub face on owner yet unwrap toilet paper. Put toy mouse in food bowl run out of litter box at full speed . Hide at bottom of staircase to trip human. Lick arm hair wake up human for food at 4am for eat all the power cords, hide at bottom of staircase to trip human or catch mouse and gave it as a present. </p>
  </div>
</div>

＆＃13;

没有前缀的CSS版本（也删除了化妆品规则）：

.flex-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem; /* optional */
}

.flex-center {
  padding: 3rem; /* optional */
}

Answer 2

您真正想要的CSS属性是＆＃39; margin＆＃39;，您必须设置为auto才能获得中心内容：

#div
{
   margin: auto;
}

Answer 3

HTML

 <section id="parent">
    <div></div>
 </section>

您可以使用flexbox样式：

#parent {
    height: /* you set the height */
    display: flex;
    align-items: center;
    justify-content: center;
}

div {
    width: /* you set the width */
    height: /* you set the height */
}

或者对div使用绝对定位并将父级的位置设置为relative：

#parent {
    width: /* you set the width */
    height: /* you set the height */
    position: relative;
}

div {
    position: absolute;
    width: /* you set the width */
    height: /* you set the height */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

将div放在父容器中。

Answer 4

您需要做的就是将div放在已应用text-align:center的包装元素中。然后，在需要居中的div上，只需设置{ display:inline-block; }即可完成两件事。

允许孩子div从正常100%调整宽度尽可能小的尺寸而不隐藏任何内容。
允许孩子div回复继承的内容 text-align:center指示。

＆＃13;

#parent { 
  text-align:center;
  border:1px solid black; /* Border added just to show position */
}
#child { 
  display:inline-block;
  border:1px solid red; /* Border added just to show position */
}

＆＃13;

<div id="parent">
  <div id="child">
     I'm the child &lt;div&gt;
  </div>
</div>

＆＃13;

而且，如果您还需要垂直对齐，则只需要利用display属性来使用relative和absolute（这不会导致fixed的问题并使用 CSS3 transform and translate properties ：

＆＃13;

html, body { height:100%; }
#parent {
  height: 100%;
  position: relative; 
  border:1px solid black;
}

#parent div {
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%; /* Vertical-Align */
  left: 50%;
  margin-right: -50%;
  /* CSS transform translate can easily align things */
  transform: translate(-50%, -50%) ;
}

＆＃13;

<div id="parent">
  <div>Centered!</div>
</div>

＆＃13;

如何在不使用position：fixed的情况下将div置于浏览器中心

4 个答案: