Home » CSS

CSS - Make Inner DIV center inside Outer DIV

In this style, we will learn how to make an Inner DIV center inside Outer DIV. Generally an Inner Div can’t be center inside Outer Div but using few parameters we can make it center.

CSS Code Snippet - Make Inner DIV Center inside Outer DIV

CSS

<style>
	.outerDiv
	{
		background-color: #006699;
		color: #fff;
		height: 200px;
		width: 200px;
		margin: 0px auto;
	}
	.innerDiv
	{
		background-color: #efefef;
		color: #000;
		height: 150px;
		width: 150px;
		margin: 0px auto;			
	}
</style>

HTML Source Code with CSS

<!--CSS - Make Inner DIV center inside Outer DIV.-->
<html>
	<head>
		<title>CSS - Make Inner DIV center inside Outer DIV.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<style>
			.outerDiv
			{
				background-color: #006699;
				color: #fff;
				height: 200px;
				width: 200px;
				margin: 0px auto;
			}
			.innerDiv
			{
				background-color: #efefef;
				color: #000;
				height: 150px;
				width: 150px;
				margin: 0px auto;			
			}
		</style>
	</head>
	<body style="text-align: center;">
		<h1>CSS - Make Inner DIV center inside Outer DIV.</h1>
		<div class="outerDiv">
			This is Outer DIV.
			<div class="innerDiv">
				This is Innder DIV.
			</div>
		</div>
	</body>
</html>

Result

make inner div center





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.