Позиционирование DIV с изображением в центре страницы

Я создал Div тег с изображением в нем, но я не могу заставить это Див, чтобы отобразить все в центре страницы:Позиционирование DIV с изображением в центре страницы

#mydiv { 
 
position: absolute; 
 
height: auto; 
 
width: 1000px; 
 
min-height: 50px; 
 
}

<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 

 
<link rel="stylesheet" href="responsive-full-background-image.css"> 
 

 
</head> 
 

 
<body> 
 
<div id="mydiv"><img src="http://dummyimage.com/960x461/FF9900/fff" width="960" height="461" /></div> 
 
</body> 
 

 
</html>

источник

2015-03-26 Mc.Lover

Это может быть сложной задачей в зависимости от остальной части макета. лучше прочитать эту статью: http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

источник

2015-03-26 15:06:42

Как насчет Imag e? not whole div –

попробовать text-align:center

#mydiv { 
 
    background:orange; 
 
    text-align:center; 
 
    position: absolute; 
 
    height: auto; 
 
    width: 1000px; 
 
    min-height: 50px; 
 
}

<body> 
 
    <div id="mydiv"> 
 
     <img src="https://placekitten.com/g/200/300" width="460px" height="461px" /> 
 
    </div> 
 
</body>

источник

2015-03-26 15:09:27 Akshay

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

#yourdiv{ 
position: absolute; 
height: auto; 
width: 30%; (% = the with of your image) 
margin-left: 35%; (1/2 of % left) 
margin-right: 35%; (1/2 of % left) 
}

источник

2015-03-26 15:10:37

Вы хотите поместить изображение в центр div? Используйте text-align:center;

Ниже я заменил ширину до 100% и сделало изображение меньше, чтобы проиллюстрировать text-align:center;

#mydiv { 
 
position: absolute; 
 
height: auto; 
 
width: 100%; 
 
min-height: 50px; 
 
    text-align:center; 
 
}

<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 

 
<link rel="stylesheet" href="responsive-full-background-image.css"> 
 

 
</head> 
 

 
<body> 
 
<div id="mydiv"><img src="http://dummyimage.com/96x46/FF9900/fff" /></div> 
 
</body> 
 

 
</html>

источник

2015-03-26 15:15:54

position:absolute: 
width:1000px; 
height:500px; 
top:50%; 
margin-top:-250px; <!-- minus half the height of the box --> 
laft:50%; 
margin-left:-500px; <!-- minus half the width of the box -->

http://codepen.io/o0nico0o/pen/RNvzKy

источник

2015-03-26 15:23:49 o0nico0o

Если это необходимо только, чтобы быть по горизонтали, он может быть таким же простым.

http://jsfiddle.net/g4we9b7x/

body { 
    text-align: center; 
} 
#mydiv { 
    display: inline-block; 
}

Если он должен быть как в центре, прочитайте это - how to center an element horizontally and vertically?

В целом, это самый простой для центрирования как - http://jsfiddle.net/g4we9b7x/1/

#mydiv { 
    transform: translateX(-50%) translateY(-50%); 
    position: absolute; 
    top: 50%; 
    left: 50%; 
}

http://caniuse.com/#feat=transforms2d

источник

2015-03-26 15:27:44 Stickers

Спасибо, теперь это выравнивание по центру, но как я могу переместить его в точную середину экрана? как горизонтальный, так и вертикальный –

@ Mc.Lover вы видели последний бит в ответе? просто следуйте этой ссылке. – Stickers

Позиционирование DIV с изображением в центре страницы

ответ

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