css element centered way, what does?

Let the child elements vertically and horizontally centered inside the parent element

I believe there are many small partners in contact with html, css often encountered when the question of how some elements centered, then here we come to talk about those things simple css element centered ...
css element into the middle level (about) center , vertical (up and down) is centered, vertically and horizontally centered.
First of all it, the elements are divided into two categories: bulk block elements and inline elements inline (inline block elements inline-block is also channeled inline element) [also divided into three categories: the block elements, inline elements, the variable elements]; let's take a look at different methods of centering element types used.
Common inline elements have a - a hyperlink, img - pictures, input - input box, span - within a defined text block ...
common block elements have div - the most commonly used block-level elements, h1 -h6- headline, p - a paragraph ...

Centered around

1. For inline elements, because the elements are not disposed inline width and height, the size itself is spanned by the content, so here we can use the text-align: center to achieve approximately centrally ,
specific codes are as follows:

<!-- css样式 -->
<style>
    div{width: 600px;height: 200px;background: pink;text-align: center;}
    span{background: #ccc;}
</style>

<!-- HTML结构 -->
<div>
    <span>内容撑开容器大小</span>
</div>

Effect of FIG:

2 for the block elements, sub-elements to achieve the bulk of the parent element is centered around , here we need to use margin: 0 auto; margin attribute is the distance between the box and the box.
Specific codes are as follows ::

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    p{width: 100px;height: 50px;background: orange;margin: 0 auto;}
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

Renderings:

Small summary : It should be noted that, for the inline elements around the center, inline elements can not set the width and height, so there must be content, content distraction size inline elements, the content can be text, pictures here equivalent to inline text element to use as a text-align: cneter; requiring the text-align: cneter; add its parent element inside, so as to achieve centering inline elements; elements for centering block, the block like element can no content, but must have its width, using a margin property box model, is the distance between margin property box and the box, so margin: 0 auto; you need to add the element itself. Here too, we can extend it for questions centered inline elements, we can first use the converted attribute display element type , the element is added to give a high width to achieve centering, often used for a simulation button element.

Vertical (upper and lower) centered

the first method:

First, the need to set up a display sub-elements: inline-block (needs to be widened because of high and guaranteed arranged laterally)
and then use the same text alignment (vertical) vertical-align: middle; then it is necessary here to vertical- align attributes a Description: vertical-align vertical text alignment, which is performed according to the top line of the font, midline, baseline, bottom alignment a "reference" so we need a "reference line" to help us determine whether the top line, midline, baseline, bottom, add an inline element at the same level behind the sub-element (set display: inline-block), and do not put a wrap, next sub-elements ; and a "reference line "OK midline, add the attribute vertical-align: middle to 0 and set the width, height of 100%.
Bluntly "reference line" is created with a parent container with high "invisible container." Specific codes are as follows:

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div class="box">
    <em></em><span></span>
</div>

FIG Effect:

Note: using a reference line method is equally applicable to bulk child element of the parent container centering !!!

Binding centering around then this method can be realized vertically and horizontally centered , specific codes are as follows:

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;text-align: center;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div>
    <em></em><span></span>
</div>

Renderings:

The second method:

By the positioning (position) to achieve vertical and horizontal centering is also applicable to bulk element (dsiplay conversion element type)
specific codes are as follows:

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;position: relative;}
    p{width: 100px;height: 50px;background: orange;/* display:inline-block; */position:absolute;top:0;bottom:0;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

Renderings

The third method:

Using display: flex; an elastic box centered vertically and horizontally to achieve the
specific codes are as follows:

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;display: flex;/* 形成弹性盒子 */}
    p{width: 100px;height: 50px;background: orange;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

Renderings

Here, the problem is centered css element of all? No! ! !

                                                                        后续将会持续添加，敬请关注！