This article mainly and everyone to share the CSS implementation of the P-center method, the CSS code is easy to understand, very good, with reference value, the need for reference to friends, hope to help everyone.
Below to share P Center implementation code, the specific code is as follows:
<! DOCTYPE html>
As above two p, implement P2 in P1 inside is centered display
One, method one
The width minus p2 of the MARGIN,P1 is the value of P2margin-left: (100-40)/2=30
The high of P1 minus P2 is the value of P2margin-top: (100-40)/2=30
<! DOCTYPE html>
Second, method two
Using the CSS Position property, the P2 relative to P1 top, left are set to 50%, and then with the Margin-top set to P2 the height of the negative half pull back, with the Marg-left set to the width of the negative half pull back, CSS settings as follows
<! DOCTYPE html>
Three, method three
or using CSS's position property, such as the following HTML
<! DOCTYPE html>
Iv. Method IV
Take advantage of the new properties of CSS3 Table-cell
<! DOCTYPE html>
Another benefit of this method is that the height of the P2 can be not fixed, as follows
<! DOCTYPE html>