Как я могу выровнять по центру картинку внутри блока <div>
?
#div1 img {
margin: auto;
}
<div id='div1'>
<img src='https://via.placeholder.com/200' alt='image' />
</div>
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуdisplay + margin :
#block {
display: table-cell;
border: 1px solid black;
width: 300px;
height: 300px;
vertical-align: middle;
}
#block img {
display: block;
margin: 0px auto;
}
<div id='block'>
<img src='https://via.placeholder.com/200' alt='image'/>
</div>
position + transform:
#block {
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
}
#block img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id='block'>
<img src='https://via.placeholder.com/200' alt='image'/>
</div>
flexbox:
#block {
border: 1px solid black;
width: 300px;
height: 300px;
display: flex; /* display: grid; */
align-items: center;
justify-content: center;
}
<div id='block'>
<img src='https://via.placeholder.com/200' alt='image'/>
</div>
Всем спасибо, сделал в итоге так:
<div>
<img src='https://via.placeholder.com/200' alt='image'/>
</div>
body {
margin: 0;
}
div {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#div1 { text-align: center; }