CSS centering problem

Learning process encountered CSS center problem, also consulted the data, everyone's methods are not the same, and at that time to understand, after the confusion; so as a front-end small white, also to write about the saying that good brains as bad as the written, after all, they know not much, in fact, is holding the attitude of learning and communication. Say not much, Direct (note: The properties in this article are all tested under chrome);

One: A parent box, how to center a child box (highly known)

The simplest one: the use of positioning, the parent box relative, the child box absolute, and then the sub-box left and top values each 50%; When you set the margin value, the left and top values are half the height of the width of the box (son), but negative; look at the code. , right result)

The second kind: the principle is similar to see the code can understand (only CSS3 attribute application)

And, of course, a third way.

Of course, the above is a block-level element, if it is an inline element, to block-level elements, using the second method above; the first and the third do not work;

Here's a demonstration

Two. Highly unknown case: (Since the height is unknown, then a picture to replace it);

1, or use the CSS3 property, since two times, then say transform, is the transformation, through the translate () method, the element is moved from its current position, according to the given left (x-coordinate) and top (y-coordinate);

2. A way to use the Internet, for the time being, I'm back.

For the time being first so much, in the spirit of learning; If you are like the code of that predecessor, please forgive me, the first time to write a blog, roar

CSS centering problem