...
Home > Article > Web Front-end > Web page centering problem_html/css_WEB-ITnose
Web page centering problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:251201browse
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.
...
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
Statement：
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
Previous article：css html image size problem_html/css_WEB-ITnoseNext article：css html image size problem_html/css_WEB-ITnose