Home > Web Front-end > HTML Tutorial > Web page centering problem_html/css_WEB-ITnose

Web page centering problem_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:56:25
Original
1242 people have browsed it

Dear seniors,
I want the main div of the webpage to be centered. I checked on the Internet and said that I can use margin: 0 auto; to center the main div and then add other divs inside. However, When I use absolute positioning for the divs added later, the webpage cannot be displayed normally. I would like to ask if I plan to use absolute positioning for all divs in the webpage (this is a simple and crude method), how should I make the webpage display better when browsing? Centered in the vessel.
The structure is roughly as follows.

//How to center this div and make the following secondary div absolutely positioned within this div.


...


Thank you very much.

By the way, I would like to ask what method is usually used to center the web page.
Is it not allowed to use mixed positioning methods in divs with parent-child relationships?


Reply to the discussion (solution)

The current page is a div centered, you can f12 and look at the css

Give the main div a width After the width, use margin:0 auto to center the main div on the page. If the secondary div needs to be positioned absolutely relative to the main div position:absolute, then the main div needs to be positioned relative to position:relative.

Give the main div a width of width:**px;, and then add the attribute margin:0 auto; so that the main div can be centered.
If the child div uses positioning, you need to add position:relevant; to the parent div; then define position:absolute; and then use top, right, left, bottom for positioning.
Such as



The content inside will be 10 pixels above and 10 pixels from the left of the centered box.

If your DIV has no width, it cannot be centered. You use margin:auto; which can only be centered horizontally. If you want global centering, you can use absolute Position position:absolute to achieve. Another way to achieve it is to use JS. Get the height of the browser and then subtract the height of the DIV and then divide it by 2.

1. Specify the width of the main div and use margin: 0 auto;
2. Use float: left; position: relative; for layout of the secondary div
3. Do not use position: absolute; for the secondary div. Layout

Related labels:
source:php.cn
Statement of this Website
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template