How to vertically center images in divs using css

This article mainly introduces how to vertically center images in divs using css. It has certain reference value and I hope it can help everyone.

We usually work on pages We often encounter situations where we are asked to display an image in the middle of a div but often don’t know how to do it. Today we will share several commonly used css codes to achieve vertical centering of images in divs

HTML code

<div>
	<img  src="/static/imghwm/default1.png"  data-src="images/1.jpg"  class="lazy"   alt="How to vertically center images in divs using css" >
</div>

Method 1

Use position and margin to realize

Allow child elements by setting the absolute positioning attribute to the parent element Relative to div positioning

relative means retaining the original position for positioning and positioning relative to its own original position

absolute means positioning away from the original position and relative to the nearest positioned parent If there is no positioned parent element, it will be positioned relative to the document

Note: To make the top, bottom, left and right of the child element 0, then set margin:auto It will automatically center vertically

The code is as follows

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;//父元素设置绝对定位
}
img{
    position: absolute;//相对定位
	width:80px;
	height:50px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;//使其垂直居中
	}

Rendering

Method 2

Use the three attributes of display: table-cell; vertical-align: middle; text-align: center; to achieve

display:table-cell: will be used as a table cell Display (similar to

and )

vertical-align: middle;Set vertical alignment, applicable to row-level elements

text-align: center: Sets the horizontal alignment. This property sets the horizontal alignment of text within block-level elements by specifying the point at which the line box is aligned.

div{
        width:200px;
        height: 200px;
        margin:300px auto;
        display: table-cell;//作为一个表格单元格显示
        vertical-align: middle;//设置垂直对齐方式
        text-align: center;//设置水平对其方式
        border:1px solid #ccc;
    }
     img {
        width:80px;
        height:50px;
    }

Rendering

Method 3

Use position, and margin- Implementation of top and margin-left

In this method, attention should be paid to the setting of margin-top and margin-left values. They should be set to half the height and width of the element, and both should be negative values

For example, margin-top: -40px means that the element is 40px upward from the upper boundary, and margin-top: 40px means that it is 40px downward from the upper boundary element

div{
	width:200px;
	height:200px;
	border: 1px solid #ccc;
	position: relative;
}
img{
	position: absolute;
	width:80px;
	height: 50px;
	top:50%;
	left:50%;
	margin-top: -40px;//向上40px
	margin-left: -25px;//向左25px

}

Rendering

Summary: There are many ways to use css to vertically center images in divs. The above are the three methods I have summarized. You are welcome to add the rest. I hope This article can help everyone learn page layout.

The above is the detailed content of How to vertically center images in divs using css. For more information, please follow other related articles on the PHP Chinese website!