Как центрировать два квадратных блока на странице?

Question

У меня есть страница, на которой я показываю статус двух сайтов - как в случае, если они в настоящее время работают, или нет. Если сайт встал, я хочу, чтобы блок имел светло-зеленый фон, а если нет, светло-красный. И имя сайта должно быть сосредоточено внутри блока.

Это то, что я пытался до сих пор:

body { 
 
     font-family: sans-serif; 
 
    } 
 
    #container { 
 
     width: 800px; 
 
     height: 600px; 
 
     margin: 0 auto; 
 
     border: 1px solid #ccc; 
 
    } 
 
    #smallcontainer { 
 
     width: 208px; 
 
     height: 100px; 
 
     margin: 200px auto auto; 
 
    } 
 
    .status { 
 
     height: 100px; 
 
     width: 100px; 
 
     background: #efefef; 
 
     float: left; 
 
     margin-left: 2px; 
 
     border: 1px solid #ccc; 
 
    }

<div id="container"> 
 
    <div id="smallcontainer"> 
 
    <div class="status"></div> 
 
    <div class="status"></div> 
 
    </div> 
 
</div>

Он работает (см full screen output), но я чувствую, что я далеко. Как мне сделать что-то простое, так как это использование CSS, правильно? Я чувствую, что мой код взломан. И как бы вы написали текст точно в центре блока, вертикально и горизонтально?

И можно ли использовать его таким образом, чтобы он работал на всех размерах экрана рабочего стола? Может быть, я должен указать ширину и высоту в процентах, а не пиксели?

Answer 1

Вы можете использовать flexbox. _^support

HTML

<div id="container"> 
    <div class="status"></div> 
    <div class="status"></div> 
</div> 

CSS

#container { 
    width: 800px; 
    height: 600px; 
    margin: 0 auto; 
    border: 1px solid #ccc; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
.status { 
    height: 100px; 
    width: 100px; 
    background: #efefef; 
    margin-left: 2px; 
    border: 1px solid #ccc; 
} 

http://jsfiddle.net/b9n3h1en/

Answer 2

Попробуйте это Fiddle, выровненный текст по вертикали и по горизонтали в центре div.

body { 
     font-family: sans-serif; 
    } 
    #container { 
     width: 800px; 
     height: 600px; 
     margin: 0 auto; 
     border: 1px solid #ccc; 
    } 
    #smallcontainer { 
     width: 208px; 
     height: 100px; 
     text-align: center; 
     margin: 200px auto auto; 
    } 
    .status { 
     height: 100px; 
     width: 100px; 
     background: #efefef; 
     float: left; 
     margin-left: 2px; 
     border: 1px solid #ccc; 
     line-height: 100px; 
    } 

Answer 3

Попробуйте jsfiddle

body { 
     font-family: sans-serif; 
    } 
    #container { 
     width: 100%; 
     height: 400px; 

     margin: 0 auto; 
     border: 1px solid #ccc; 
    position:relative; 
    } 
    #smallcontainer { 
     width: 208px; 
     height: 100px; 
     position:absolute; 
     left:50%; 
     top:50%; 
     margin-left:-100px; 
     margin-top:-50px; 
    } 
    .status { 
     height: 100px; 
     width: 100px; 
     background: #efefef; 
     float: left; 
     margin-left: 2px; 
     border: 1px solid #ccc; 
     display: -webkit-box; 
     -webkit-box-orient: vertical; 
     -webkit-box-pack: center; 
     -webkit-box-align: center; 

     display: -moz-box; 
     -moz-box-orient: vertical; 
     -moz-box-pack: center; 
     -moz-box-align: center; 

     display: box; 
     box-orient: vertical; 
     box-pack: center; 
     box-align: center; 
     text-align:center; 
    } 

Также см больше о "дисплея: Flexbox" https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 4

Вот как я это сделать:

HTML:

<div id="container"> 
    <div id="smallcontainer"> 
     <div class="status"> 
      <div class="border"> 
       <div class="txt">Text Here</div> 
      </div> 
     </div> 
     <div class="status"> 
      <div class="border"> 
       <div class="txt">More Text Here</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

* { 
    box-sizing: border-box; 
} 
body { 
    font-family: sans-serif; 
} 
#container { 
    width: 95%; 
    height: 400px; 
    margin: 0 auto; 
    border: 1px solid #ccc; 
    position: relative; 
} 
#smallcontainer { 
    width: 208px; 
    height: 100px; 
    margin: 0 auto; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
.status { 
    height: 100%; 
    width: 50%; 
    float: left; 
    text-align: center; 
    padding: 2px; 
} 
.border { 
    background: #efefef; 
    border: 1px solid #ccc; 
    width: 100%; 
    height: 100%; 
    position: relative; 
} 
.txt { 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Смотрите скрипку здесь: http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 5

Вы можете добавить отрицательные поля для каждого из div s вы хотите положить точно в центр. Обратите внимание, что для этого ширина и высота должны быть в пикселях.

body { 
 
    font-family: sans-serif; 
 
} 
 
#container { 
 
    width: 800px; 
 
    height: 600px; 
 
    border: 1px solid #ccc; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -400px; 
 
    margin-top: -300px; 
 
} 
 
#smallcontainer { 
 
    width: 208px; 
 
    height: 100px; 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -104px; 
 
    margin-top: -50px; 
 
} 
 
.status { 
 
    height: 100px; 
 
    width: 100px; 
 
    background: #efefef; 
 
    float: left; 
 
    margin-left: 2px; 
 
    border: 1px solid #ccc; 
 
}

<div id="container"> 
 
    <div id="smallcontainer"> 
 
    <div class="status"></div> 
 
    <div class="status"></div> 
 
    </div> 
 
</div>