Get the App
SLTechnology News&Howtos  ›  Development  › 

How does css get div in the middle?

Shulou Source: shulou.com Published: 2022-06-01 08:50:31 10月03日 Update

Today, the editor will share with you the relevant knowledge points about how css makes div center. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

When we browse the web, we will find that the main body of the general website is in the middle of the page, and the center is displayed in the center of the browser, as long as we achieve the div center condition and browser center condition to save the same.

If we name the outermost div box php1, we just set the body to be centered, as follows:

Body {text-align:center}

At this point, we need to set the php1 box to margin:0auto, with the following code:

# php1 {margin:0auto}

To make it easier for us to observe the effect, we add a black border to php1, with a height of 100px and a width of 300px.

The code is as follows:

Demonstration of the effect of div centering on php Chinese website

The display effect is as follows:

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

These are all the contents of the article "how css makes div in the middle". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Tags: Browse browser knowledge article code effect style content time condition box different big consistent central Chinese web main body just outer layer Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS MariaDB Microsoft Linux Huawei