CSS Позиционирование, вертикально и горизонтально центрирование DIV?

Я пытаюсь создать страницу, где есть div в середине страницы, расположенной по горизонтали, а не по вертикали, с еще тремя div внутри, которые расположены по центру вертикально и горизонтально с равным интервалом. Чтобы достичь этого, я подумал, что было бы лучше создать другой div без цвета фона, а затем использовать margin: auto на нем, этот div будет сосредоточен в главном div, но я не могу заставить 3 других divs центрироваться в что, как поля не учитывают родительский элемент?CSS Позиционирование, вертикально и горизонтально центрирование DIV?

Я пробовал несколько методов, которые говорят, что они должны центрировать мои элементы, но они не работают для меня, поэтому я подумал, что было бы лучше, если бы кто-нибудь мог объяснить мне, как этот эффект может быть достигнут в CSS.

Вот скриншот текущей ситуации (красный DIV будет невидим в окончательном варианте, покрашены, чтобы помочь мне): http://i.imgur.com/cHWfVx6.png

HTML код:

<html> 
 

 
<head> 
 
<title>Title Placeholder</title> 
 
<link rel="stylesheet" type="text/css" href="stylesheet.css"></link> 
 
</head> 
 

 
<body> 
 
\t 
 
\t <div id="title"></div> 
 

 
\t <div id="introdiv"></div> 
 

 
\t <div id="wrapper"> 
 
\t \t 
 
\t \t <div id="container"> 
 
\t \t \t <div class="box"></div> 
 
\t \t \t <div class="box"></div> 
 
\t \t \t <div class="box"></div> 
 
\t \t </div> 
 
\t </div> 
 

 
</body> 
 

 

 
</html>

CSS Код:

html { 
 
\t background: ##6f7604; 
 
\t background-image: url("zenbg-1.png"), url("zenbg-2.png"); 
 
\t background-repeat: repeat-x, repeat; 
 
} 
 

 

 
#title { 
 

 
\t background-color: rgba(83,188,255,0.6); 
 
\t min-height: 5%; 
 
\t width: 90%; 
 
\t margin: auto; 
 
\t border: 1px solid #ddd; 
 

 
} 
 

 

 
#introdiv { 
 

 
\t background-color: rgba(255,207,76,0.9); 
 
\t min-height: 15%; 
 
\t width: 70%; 
 
\t margin: auto; 
 
\t margin-top: 2.5%; 
 
\t border: 1px solid #ddd; 
 

 
} 
 

 

 
#wrapper { 
 

 
\t background-color: rgba(83,188,255,0.6); 
 
\t min-height: 65%; 
 
\t width: 80%; 
 
\t margin: auto; 
 
\t margin-top: 2.5%; 
 
\t border: 1px solid #ddd; 
 

 
} 
 

 
#container { 
 

 
\t min-height: 10%; 
 
\t width: 50%; 
 
\t background-color: red; 
 
\t margin: auto; 
 
\t margin-top: 6.5%; 
 
} 
 

 
.box { 
 

 
\t background-color: rgba(255,207,76,0.9); 
 
\t min-height: 40%; 
 
\t width: 20%; 
 
\t margin-left: 5%; 
 
\t margin-top: 5%; 
 
\t border: 1px solid #ddd; 
 
\t display: inline-block; 
 
}

Спасибо за вашу помощь, если вам нужна дополнительная информация, спросите.

источник

2015-06-16 Andrew89898

http://jsfiddle.net/soledar10/w5qje0yy/ – Dmitriy

http://flexboxin5.com/ Проверьте flexbox. – disinfor

Вы можете использовать absolute и transform для выравнивания элемента middle и center. Пример:

.main { 
 
    width: 100%; 
 
    height: 256px; 
 
    padding: 20px; 
 
    background: #000; 
 
} 
 

 
.center-h { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    background: #555; 
 
} 
 

 
.center-vh { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: #999; 
 
    padding: 10px; 
 
} 
 

 
.box { 
 
    display: inline-block; 
 
    width: 64px; 
 
    height: 64px; 
 
    margin-right: 10px; 
 
    background: #ccc; 
 
    float: left; 
 
} 
 
.box:last-child { 
 
    margin-right: 0; 
 
}

<div class="main"> 
 
    <div class="center-h"> 
 
    <div class="center-vh"> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
     <div class="box"></div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-06-16 18:28:13

http://howtocenterincss.com – gearsdigital

Использование вертикального выравнивания: средний, как это

.box { 

    background-color: rgba(255,207,76,0.9); 
    min-height: 40%; 
    width: 20%; 
    margin-left: 5%; 
    vertical-align: middle; 
    border: 1px solid #ddd; 
    display: inline-block; 
}

источник

2015-06-16 18:28:24

CSS Позиционирование, вертикально и горизонтально центрирование DIV?

ответ

Смежные вопросы