What should you pay attention to when centering a div in HTML?

Many people have such doubts. When we lay out a web page, the main frame of the web page is usually centered in the browser. So if you want to achieve horizontal centering of the outermost DIV, you definitely need to set it separately. What should you pay attention to when setting a div to be centered? Let me introduce it to you today.

If the CSS of the outermost DIV box is named "#divcss5", at this time, in order to be compatible with major browsers, the outermost box will be centered.

First condition:

At this time, set the css content centering style (text-align:center) for "body"

That is, the CSS code:

body{text-align:center}

One setting:

At this time, set the necessary centering style css margin for "#divcss5"

That is, the CSS code:

#divcss5{margin:0 auto}

DIV center usage example

In order to facilitate the observation of the layout centering effect, we add a CSS border to "#divcss5" with a black border, a CSS width of 300px, and a height of 100px.

1. Finally get the CSS code for DIV centering:

body{ text-align:center} 
#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

2. Corresponding html code snippet:

<div id="divcss5">DIV水平居中案例</div>

There are so many things to pay attention to when centering a div, and more Please pay attention to other related articles on the php Chinese website!

Related recommendations:

How to use the

tag of html

##How to write the html document type declaration

How to display circular images in css3

The above is the detailed content of What should you pay attention to when centering a div in HTML?. For more information, please follow other related articles on the PHP Chinese website!