What is the better way to center a image in a div?

Hello friends:

After looking for some example, I got this one:

<html>
	<head>
	</head>
	
	<style>
		body  {background-color:white}
		div {background-color:cyan; border: 1px solid black; height:200px; width:200px; display:table-cell; vertical-align:middle; text-align:center}
		
	</style>
	
	<body>
		<div>
			<img src="c:\aguia.jpg" width="50%" height="50%">
		</div>	
	</body>


</html>

Open in new window


is the better way to center ( vertical and horizontal) the image in my div?

Regards
Alex
LVL 1
hidrauAsked:
Who is Participating?
 
Snarf0001Connect With a Mentor Commented:
Personally I prefer using flex for vertical alignment.  I've found that having display:table-cell causes unexpected issues with placement on the containing element.  Of course I can't specifically remember any right now.... but I've had problems.
Nothing with flex:

<html>
<head>
    <style>
        body { background-color: white }
        div { background-color: cyan; border: 1px solid black; height: 200px; width: 200px; display: flex; align-items: center; justify-content: center; }
    </style>
</head>
<body>
    <div>
        <img src="c:\aguia.jpg" width="50%" height="50%">
    </div>
</body>
</html>

Open in new window

1
 
Eddie ShipmanConnect With a Mentor All-around developerCommented:
From: https://www.w3.org/Style/Examples/007/center.en.html

div img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

Open in new window

1
 
hidrauAuthor Commented:
thanks a lot for help
0
All Courses

From novice to tech pro — start learning today.