Css + div vertical center alignment highlights

1. Reset the default settings of the browser

Add the following code to your global css file:
/* 1. Reset browser defaults then reset the browser font size */
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p,
Blockquote, th, td {margin: 0; padding: 0 ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
Fieldset, img {border: 0 ;}
Address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal ;}
Ol, ul {list-style: none ;}
Caption, th {text-align: left ;}
H1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal ;}
Q: before, q: after {content: ";}
Abbr, acronym {border: 0 ;}
Html {font-size: 62.5% ;}

Then, we set the font-size to 10px, for example:

Html {font-size: 62.5% ;}

In this way, we can easily set the page font size through em units. e. g

P {font-size: 1.2em;}/* the same as 12px */
H1 {font-size: 2em;}/* the same as 20px */

2. horizontal center (fixed width only)
I think everyone knows this, for example:

Div # container {margin: 0 auto ;}

3. Make full use of absolute and relatively in position
4. center or center (vertical)

Div. popup {height: 400px; width: 500px; position: absolute; top: 50%; left: 50% ;}
Div. popup {margin-top:-200px; margin-left:-250px ;}

Memo:
· The fixed values of width and height must be specified;
· The position value is absolute;
· Specify top and left as 50% respectively;
· Set half of the negative values of height and width of margin-top and margin-left respectively. The value can also be abbreviated as: margin:-200px 0 0-250px;

5. CSS can also be reused.
Create your global css rules and use it fully on any pages that can be used. e. g

. Left {float: left ;}
. Right {float: right ;}
Img. left {border: 2px solid # aaaaaa; margin: 0 10px 0 0 ;}
Img. right {border: 2px solid # aaaaaa; margin: 0 0 0 10px; padding: 1px ;}

6. IE6 margin bug
When you set the float attribute of the div element and specify the margin-left attribute, you will be too disappointed when Browsing IE6 or earlier versions, how does IE6 Add the margin value to you?

Solution: Set div to inline. e. g

Div {float: left; margin: 40px; display: inline ;}

7. Simple navigation menu
Xhtml:

<Div id = "navbar">
<Ul>
<Li> <a href = http://www.bkjia.com> LieHuo Design </a> </li>
<Li> <a href = http://www.google.com> Google </a> </li>
<Li> <a href = "http://bbs.bkjia.com/"> LieHuo BBS </a> </li>
</Ul>
</Div>

CSS:
# Navbar ul li {display: inline; margin: 0 10px 0 0 ;}
# Navbar ul li a {color: #333; display: block; float: left; padding: 5px ;}
# Navbar ul li a: hover {background: # eee; color: black ;}