How do I center a div in the middle of the page, even if I change the window size?

Refresh

December 2018

Views

4.6k time

3

I tried all the solutions on here, but none of them worked. I want to center this horizontally and vertically, regardless of the window size.

Note: I have my container div just the way I want it. It wraps around several other divs. If I adapt the changes suggested by this link, my container div gets messed up. I'm not trying have this be responsive. It's a fixed size (think an image), and I just want it to always be in the center of the window, regardless of window size.

Here's what I have:

* {
  margin: 0;
  padding: 0;
}
#container {
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: auto;
  /* changed to auto, didn't make a difference*/
  border-width: 1px;
  border-color: black;
  border-style: solid;
  position: absolute;
}
.light {
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;
}
<body>
  <div id="container" onclick="changeColor()">
    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</body>

3 answers

4

Может быть , это не работает для вас , как containerабсолютная и , следовательно, bodyимеет нулевую высоту.

  1. Добавить height: 100%к htmlи bodyпервым.

  2. Используйте метод центрирования для absoluteLY позиционированного элемента с помощью , transformчтобы container:

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    

Дайте мне знать ваше мнение по этому вопросу. Спасибо!

html,
body {
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#container {
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display: block;
  margin: 0 auto;
  border-width: 1px;
  border-color: black;
  border-style: solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.light {
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;
}
<body>
  <div id="container" onclick="changeColor()">
    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</body>
2

Вы также можете сделать это с Flexbox (я понимаю, что в комментарии вы сказали, что это не нужны «отзывчивый» или «гибкий»). Flexbox получит этот «привкус-мазок в середине». Элемент, который должен быть в центре должен иметь родительский элемент, который принимает следующий CSS:

.whatever-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

С вашим примером я завернул его в divс классом light-wrap. Я также дал bodyи html100% высоты так , чтобы .light-wrapможно было использовать процентное значение по высоте. Если вы запустите код ниже, убедитесь , чтобы попробовать его на всем экране для полного эффекта.

* {
  margin: 0;
  padding: 0;
}

body, html {
  height:100%;
}

.light-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* height is just to demonstrate  */
  background:#eee;
}

#container {
  background-color: black;
  border-radius: 10px;
  padding: 5px;
  display:inline-block;
  border: 1px solid black;
}

.light {
  height: 100px;
  width: 100px;
  display: block;
  border-radius: 50%;
  margin: 10px;
  border-width: 5px;
  background-color: grey;
}
<div class="light-wrap">
  <div id="container" onclick="changeColor()">

    <div id="green" class="light"></div>
    <div id="yellow" class="light"></div>
    <div id="red" class="light"></div>
  </div>
</div>
1
<div class="shell">
  <div class="container">
    <div class="red">Red</div>
    <div class="green">Green</div>
    <div class="blue">Blue</div>
  </div>
</div>

CSS:

html, body {
  height: 100%;
}
.shell {
  height: 100%;
  margin: 0;
 text-align: center;
  width: 100%;
}

.shell:before {
  content: ' ';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.container {
  width: 100px;
  color: #fff;
  display: inline-block;
  margin: auto;
  vertical-align: middle;
}

.red {
  background: red;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
}

.green {
  background: green;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
  margin-bottom: 10px;
}

.blue {
  background: blue;
  height: 100px;
  line-height: 100px;
  width: 100px;
  color: #fff;
  border-radius: 50%;
}

См скрипку : https://jsfiddle.net/wLpv9x2o/3/

Edit: это просто быстрый подход, стиль его к вашим потребностям