How to center a div with css? How to center div in css

How to center the div horizontally? How to center div? I believe many people will have this question. This article will explain how to center a div with css? And how to achieve centering of div.

When we browse the web, we will find that the main body of the general website is in the middle of the page, and is displayed in the center of the browser. As long as we realize that the div centering condition is consistent with the browser centering condition. .

If we name the outermost div box php1, we only need to set the body style to be centered. The code is as follows:

body{text-align:center}

At this time, we need to set the php1 box to margin:0 auto, the code is as follows:

#php1{margin:0 auto}

In order to facilitate our observation of the effect, we add a black border to php1 with a height of 100px and a width of 300px.

The code is as follows:

<div id="php1">php中文网div居中效果演示</div>

The display effect is as follows:

In the css style, if we want to center the div, we only need to center the object Set it to margin: 0 auto style, but some browsers will default to centering. In order to be compatible with browsers, we can use the above method to set it.

The above is how to center the div with css? A complete introduction to the method of using css to center divs. If you want to know more about CSS3 tutorial, please pay attention to the php Chinese website.

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