How to center a image in a div horizontally and vertically

Question

I want do center my image horizontally and vertically but I just can center horizontally, at the same time I want this responsive,can anyone help me ? enter code here

.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}

.moldura{
 display: block;
 width: 50px;
 margin-right: auto;
 margin-left: auto;
 margin-top: auto;
 margin-bottom: auto;
 border: 1px solid black;
}

.moldura img{
 width: 50px;
}

<!DOCTYPE html>
<html>
<head>
 <title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>

 <div class="video"> 
  <div class="moldura">
   <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
  </div>

 </div>
 
</body>
</html>

It is expected that you do a little research before posting questions on SO. This question has been asked hundreds of times and a quick search would have brought up multiple answers. Please try to do a little research before asking next time — Pete, Nov 21 '17 at 16:57
Hi! It´s my 3rd time in SO,btw this isn't the solution for my question : "Flexbox: center horizontally and vertically " because I don't use flexbox. Thank you but I have got the correct answer for my question — Diogo Calisto, Nov 21 '17 at 17:11

Andrew Jones · Answer 1 · 2017-11-21T17:04:25.787

2

Have you tried using flex boxes?

EDIT: As per comment, no i didn't know about using "align-items", works well, I've edited the snippet accordingly! :)

.video{
display:flex;
justify-content: center;
align-items: center;
flex-direction:column;
height:250px;
background-color: peru;
}

.moldura{

}

.moldura img{
 height:50px;
 border:1px solid black;
}

<!DOCTYPE html>
<html>
<head>
 <title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>

 <div class="video"> 
  <div class="moldura">
   <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
  </div>

 </div>
 
</body>
</html>

edited Nov 21 '17 at 17:04

answered Nov 21 '17 at 16:51

Andrew Jones

41
6

1

You know you don't need the second flex box - you can just use align-items center with justify-content center and it will do both horizontal and vertical centring: https://jsfiddle.net/174ne83x/ – Pete Nov 21 '17 at 17:02
1

Learn something new every day! Cheers for that, might have to go back and fix up some style sheets! – Andrew Jones Nov 21 '17 at 17:06
Thank you for teach me this Andrew ! :) – Diogo Calisto Nov 21 '17 at 17:16

score 0 · Accepted Answer · answered Nov 21 '17 at 16:49

There you are:

.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}

.moldura{
  display: block;
  width: 50px;
  border: 1px solid black;

  /* Here is the important code*/
  position: relative;
  top: 50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.moldura img{
 width: 50px;
}

<!DOCTYPE html>
<html>
<head>
 <title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>

 <div class="video"> 
  <div class="moldura">
   <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
  </div>

 </div>
 
</body>
</html>

Thx !!!! I need to learn more about "transform",that's what I needed ! :) — Diogo Calisto, Nov 21 '17 at 17:19
@DiogoCalisto If this is the correct answer accept it as a valid answer please :D — FcoRodr, Nov 21 '17 at 20:42

score 0 · Answer 3 · answered Nov 21 '17 at 16:55

Added line-height css property.

.video{
width: 100%;
height: 500px;
background-color: peru;
position: absolute;
}

.moldura{
 display: block;
 width: 50px;
 margin:0 auto;
    line-height:500px;
    height:100%;
}

.moldura img{
 width: 50px;
    vertical-align:middle;
}

<!DOCTYPE html>
<html>
<head>
 <title>TESTE</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>

 <div class="video"> 
  <div class="moldura">
   <img src="https://lh4.ggpht.com/SKQHLsT8xsNpXeL5si4bBqSNqdy8Qbvzk15J3qWTp55AnnkbNO6-vBJhIBTQxyq16YE=w300">
  </div>

 </div>
 
</body>
</html>

wow this solution is so last decade! – Pete Nov 21 '17 at 16:57 — Pete, Nov 21 '17 at 16:57

How to center a image in a div horizontally and vertically

3 Answers3