How to center the whole in css

Generally, the main content layout of web pages is centered in the browser. For example, the main page of the PHP Chinese website has a centered layout.

How to use CSS to center the entire web page layout? What are the conditions for layout centering?

First we need to set the css content centering style (css text-align:center) for the body, and then use margin:0 auto when laying out the outermost DIV box. The object layout is centered.

Of course we use margin:0 auto for the box object. Some browsers do not add the text-align:center style to the body object, and the layout is still centered. This is because the default styles of different browsers are different. If you do not set text-align:center on the body, some browser layouts will be centered and some will be on the left. This will result in layout compatibility.

Explanation: margin: 0 auto, which means that the upper and lower intervals of the object are 0, the left and right intervals are automatic, and the left and right intervals are automatic according to the width of the object.

Web page layout centering conditions

1. Set the CSS content centering style text-align:center on the body, code: body{text-align:center}

2. Set the margin:0 auto style on the outermost object, Code: .php{margin:0 auto}

Case:

In order to observe the layout centering effect, our CSS named object is ".php" and sets the CSS border is black, css width is 400px, css height is 100px.

1. The css code is as follows:

2. HTML code snippet:

The object php layout is centered

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