Home > Article > Web Front-end > How to center a div in html

How to center a div in html

清浅Original: 2019-04-10 16:27:1623252browse

The methods to center a div in HTML include: the margin method sets the left margin and top margin of the margin to the value of the parent element minus the child element and then divides it by 2 to center the div; in addition, the position method can also center the div Centering

When laying out the page, we often center the main part of the web page on the page. This requires us to achieve horizontal centering of the div. Next, we will introduce how to center the div on the page in detail in the article. It has certain reference value and I hope it will be helpful to everyone

[Recommended course: HTML Tutorial]

margin method

You can use margin to center the div. The value set for margin-left is the width of the parent element minus the width of the child element and then divided by 2. (In this example: (400-100)/2=150px), the value of margin-top is the height of the parent element minus the height of the child element divided by 2 (in this example: (300-100)/2= 100px)

Example:

<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div>
  <div></div>
</div>
</body>
</html>

Rendering:

How to center a div in html

##position method

You can use positioning to center the div vertically. We can set the absolute positioning of the sub-element, and set the top and left values to 50%. However, it should be noted that when using positioning, you must also set the margin value, where margin-left and The values of margin-right are all negative, and the size of the value is half the width and height of the child element

Example:

<style>
	.box{
	     width:400px;
	     height: 300px;
	     border: 1px solid #ccc;
	     position: relative;
	}
	.box1{
		width:100px;
		height: 100px;
		background-color: pink;
		position: absolute;
        top: 50%;
        left: 50%;
        margin:-50px 0 0 -50px 		
		}
	</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

Rendering:

How to center a div in html

Reference for this article: https://www.html.cn/doc/html/layout/

HTML tag index: https://www.html.cn/sitemap.html

Summary: The above is the entire content of this article. I hope this article can help everyone learn How to center a div on the page

The above is the detailed content of How to center a div in html. 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

Previous article：Implement simple animation with HTMLNext article：Implement simple animation with HTML

See more

How to center a div in html

Related articles