How to center the image in the css box-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to center the image in the css box

青灯夜游

Feb 23, 2021 pm 03:59 PM

csscenter

Centering method: 1. Set relative positioning for the box and absolute positioning for the picture; then adjust the position of the picture. 2. Set the img image element as a block-level element; then use table-cell and "vertical-align:middle;" to center it. 3. Use flexbox layout to center.

How to center the image in the css box

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css to center the image in the div box

##First method: Use the position attribute of css

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div1 {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px; 
				position: absolute;
				margin: auto;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		</style>
	</head>

	<body>

		<div class="div1">
			<img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="How to center the image in the css box" >
		</div>
	</body>

</html>

Rendering:

How to center the image in the css box

Second: Use the new attributes of css3 table-cell, vertical-align:middle;

nbsp;html>


	
		<meta>
		<style>
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: table-cell;
            	vertical-align: middle;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	

	

		<div>
			<img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="How to center the image in the css box" >
		</div>

Effect:

How to center the image in the css box

[Recommended tutorial:

CSS video tutorial]

Third type: Use Flexbox layout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				display: flex;
				/*!*flex-direction: column;*!可写可不写*/
				justify-content: center;
				align-items: center;
			}
			
			img {
				width: 100px;
				height: 100px;
				display: block;
				margin: auto;
			}
		</style>
	</head>

	<body>

		<div class="div">
			<img  src="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="How to center the image in the css box" >
		</div>
	</body>

</html>

Effect:

How to center the image in the css box

The fourth way: using the transform attribute (disadvantage: need to support Html5)

nbsp;html>


	
		<meta>
		<style>
			.div {
				width: 200px;
				height: 200px;
				border: 1px solid #000000;
				position: relative;
			}
			
			img {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50%;
				left: 50%;
				-ms-transform: translate(-50%, -50%);
				-moz-transform: translate(-50%, -50%);
				-o-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		</style>
	

	

		<div>
			<img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="How to center the image in the css box" >
		</div>

Rendering:

How to center the image in the css box

For more programming-related knowledge, please visit:

Programming Video! !

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

CSS Animations: Is it hard to create them?May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

@keyframes CSS: The most used tricksMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversatilityandpowerincreatingsmoothCSSanimations.Keytricksinclude:1)Definingsmoothtransitionsbetweenstates,2)Animatingmultiplepropertiessimultaneously,3)Usingvendorprefixesforbrowsercompatibility,4)CombiningwithJavaScriptfo

CSS Counters: A Comprehensive Guide to Automatic NumberingMay 07, 2025 pm 03:45 PM

CSSCountersareusedtomanageautomaticnumberinginwebdesigns.1)Theycanbeusedfortablesofcontents,listitems,andcustomnumbering.2)Advancedusesincludenestednumberingsystems.3)Challengesincludebrowsercompatibilityandperformanceissues.4)Creativeusesinvolvecust

Modern Scroll Shadows Using Scroll-Driven AnimationsMay 07, 2025 am 10:34 AM

Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.

Revisiting Image MapsMay 07, 2025 am 09:40 AM

Let’s run through a quick refresher. Image maps date all the way back to HTML 3.2, where, first, server-side maps and then client-side maps defined clickable regions over an image using map and area elements.

State of Devs: A Survey for Every DeveloperMay 07, 2025 am 09:30 AM

The State of Devs survey is now open to participation, and unlike previous surveys it covers everything except code: career, workplace, but also health, hobbies, and more.

What is CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.

See all articles