Я пытаюсь сделать div внутри другого точно в середине. Есть ли лучший способ сделать это?Сделайте div внутри Div - в середине
body, html
{
margin:0;
height:100%;
}
#master_wrapper
{
width:100px;
height:100px;
background:#57a957;
}
#header
{
left:50%;
width:50%;
height:50%;
background:red;
}
<div id="master_wrapper">
<div id="header">
Header
</div>
margin: 0 auto;
Это будет автоматически горизонтально центрирования DIV с верхним и нижним краем 0; Вы также можете сделать:
margin: 0 auto 0 auto;
Для контроля верхнего и нижнего полей, значения маржи идут как:
margin: top right bottom left;
width: 100%; // can be in pixels also.
margin: 0 auto;
Попробуйте с дополнением: http://jsfiddle.net/5oxg9aay/1/
body, html {
margin: 0;
height: 100%;
}
#master_wrapper {
width: 58px;
height: 58px;
background: #57a957;
padding: 4%;
}
#header {
background: red;
width: 100%;
height: 100%;
}
или использование a position: absolute; в заголовке и работать с левым/правым/верхним/нижним, но вам нужно сделать #master_wrapper материнский контейнер для #header.
Вы можете сделать внутренний div ровно посередине, добавив стиль «margin: 0px auto» в #header в файле css.
Пример, как разместить HTML-элемент в средней горизонтальной и вертикальной
<!DOCTYPE html>
<html>
<head>
<title>Div in middle</title>
</head>
<body>
<div style="
background: red;
width : 300px;
height : 100px;
">
<div style="
background : #fff;
width : 123px;
height : 67px;
margin : 0 auto;
position: relative;
top : 50%;
transform : translateY(-50%);
">
Div in middle of other div
</div>
</div>
</body>
</html>Только так вы знаете, много вашего CSS бессмысленно/избыточными так как вы не определили свое расположение своих классов. То есть использовать top:... left:... right:... и/или bottom:... вам необходимо иметь установить позиционирование absolute;
Фрагмент ниже позволяет вам по горизонтали и/или вертикали центрирования DIV элемент:
html,
body {
padding: 0;
margin: 0;
}
#master_wrapper {
width: 100px;
height: 100px;
background: #57a957;
position: relative;
}
#header {
position: absolute;
width: 50%;
height: 50%;
background: red;
margin:0 auto; /*horizontally center*/
left:0;
right:0;
-webkit-transform: translateY(50%); /*vertically center*/
-ms-transform: translateY(50%);
transform: translateY(50%);
}<div id="master_wrapper">
<div id="header">
Header
</div>
Define " лучше". – undefined
http://css-tricks.com/centering-css-complete-guide/ – fcalderan
Возможный дубликат [Горизонтальный центр div в div] (http://stackoverflow.com/questions/114543/horizontally-center-a -div-in-a-div) –