A simple way to explain the center layout of CSS elements

This article mainly describes the CSS elements in the center layout of the simple method, the introduction of embedded elements and block elements and in-line block three cases, the need for friends can refer to the following

First we need to know what kinds of elements are there?

Inline elements (display:inline;) such as A,span,b,i "a non-customizable box"

[The default peer can continue to follow the same type label]
[Content Open Width]
[does not support wide height]
[Does not support the upper and lower margin and padding]
[Code swap is resolved to NULL]

Block elements (Display:block;) such as P,p,h1-h6

[Default exclusive line display]
[Basic support for all CSS commands]

inline block (display:inline-block;) such as IMG "IMG is such a magical thing." It is neither inline nor block, but inline block "

[Block on line display]
[Support Wide height]
[Content open width when no width]

So next we'll center the top three elements in turn

One-line text of inline elements

The most common solution is to use text-align and line-height

line-height:200px;   Text-align:center;

But will this approach be perfect? I don't think so (it's estimated that someone is vomiting my obsessive-compulsive disorder)
Anyway, I don't like it when I select text to see the non-text area, but ie6-8 only selects the text.

Second, the block element is centered

Workaround: Use positional elements +margin negative values

width:100px;   height:100px;   position:relative;   left:100px;   top:100px;   margin-left:-50px;   margin-top:-50px;

Disadvantage: Requirements must know the width of the box height

Three, the inner block center.

(1) Convert img into a background image, then use background-position:center; however, it is important to note that the link to the image is often changed, so you need to do this:

is not a violation of the principle of content style separation.

(2) Auxiliary label

HTML code:

<p class= "box" >      <span></span>  </p>

CSS code:

. box{width:200px;height:200px;border:1px solid #333; margin:0 auto;text-align:center;}   . Box img{vertical-align:middle;border:1px solid #999;p adding:2px;}   . Box span{display:inline-block;height:100%;background: #333; vertical-align:middle;}

Effect:

Nonsense: To have the IMG element and the auxiliary element span one line, the horizontal is not completely centered, and when Inline-block is used, the newline is parsed into a space. In fact, there are other methods on the Internet, such as the long-swept table method. A lot of internet is not showing off here.