CSS in the middle, at work, often encounter. It can be divided into horizontal and vertical centering, the following are several implementations centered manner.
In the following example, the attribute value related to CSS.
.parent-frame {
width: 200px;
height: 200px;
border: 1px solid red;
}
.child-frame {
width: 100px;
height: 100px;
border: 1px dotted blue;
}
1: text-align: center, horizontal center
Massive element is centered horizontally
<div class="parent-frame">
子元素水平居中
<i style="display:block; text-align: center;color: blue">块状元素，水平居中</i>
</div>
Subelement horizontal center
block element is centered horizontally
2: margin: 0 auto, middle level
Centered horizontally. Down from the outer border of 0, about margins browser will automatically calculate a bisected
<div class="parent-frame">
子元素水平居中
<i class="child-frame" style="display: block;margin: 0 auto">块状元素，水平居中</i>
</div>
Subelement horizontal center
block element is centered horizontally
3: line-height value, vertical centering
Vertically. line-height attribute, setting the distance between the line (line H). Negative values are not allowed.
Single line of text elements will apply, multi-line elements do not apply this method. Element content is a single line, and its height is fixed,
<div class="parent-frame">
<div style="line-height: 200px;">line-height值=父height值</div>
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）Parent line-height value = height values
4: Use float property, with relative positioning, horizontal center achieve
Parent element arranged to float, then the overall movement to the right 50% of the parent element, then the overall sub-elements are moved to the left by 50%, to achieve centered horizontally.
Remember to remove floating the parent element.
<div class="parent-frame">
<div style="float: left; position: relative; left: 50%; clear: both;" >
<div style="position: relative; left: -50%">虽然宽度不同weiqinl</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">但一样</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">水平居中了</div>
</div>
<div style="float: left; position: relative; left: 50%; clear: both;">
<div style="position: relative; left: -50%">使用float属性，记得清楚浮动</div>
</div>
</div>
Although different widths weiqinl but the same is centered horizontally using the float property, remember to clear the floating
5: using the layout table, the default vertical centering
The default table vertically centered vertical-align: middle. If you want centered horizontally, that is inline elements, add the attribute text-align: center
<table class="parent-frame">
<tr>
<td>
table默认垂直居中[vertical-align: middle]
</td>
<td style="text-align:center;">
水平居中添加text-align:center
</td>
</tr>
</table>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）6: imitation table, display: table-cell. And using the vertical-align property, Vertical Centering
This attribute of the element of the vertical alignment.
Within the definition of the element with respect to the baseline line perpendicular to the baseline of the element row are aligned. In the table cell, this property is set Cells box alignment cell.
<div class="parent-frame" style="display: table-cell;vertical-align: middle">
仿table: display:table-cell垂直居中vertical-align:middle
</div>
Imitation table: display: table-cell vertically centered vertical-align: middle
7: absolute absolute positioning, with the use of margin, to achieve horizontal and vertical centering
Corresponding to the absolute positioning relative absolute, needs of a given width. Meanwhile, top / bottom should be equal, and the sum does not exceed the predetermined width. right / left should be equal, and the sum does not exceed the predetermined width.
Together with margin: auto use
<div class="parent-frame" style="position: relative">
利用绝对定位，配合margin:auto自动计算外边距。
<div class="child-frame" style="position: absolute; top: 0;right: 0; bottom: 0; left: 0;margin: auto;">
定宽元素,需要确定的尺寸。relative是为了给子元素定位用。
</div>
</div>
Use absolute positioning, with margin: auto automatic calculation of margins. Elements fixed width, the size needs to be determined. relative to the positioning element to the child.
8: absolute absolute positioning, with the margin of the negative (negative margins) to achieve horizontal and vertical centering.
negative margins negative margins will lead to structural collapse, use this feature to achieve.
<div class="parent-frame" style="position: relative;">
利用绝对定位，配合margin的负值来实现居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; margin-top: -51px; margin-left: -51px;">
负边距来实现，水平垂直居中。需要知道该元素的具体大小
</div>
</div>
Use absolute positioning, with a negative margin to achieve the middle. Negative margin is achieved, horizontal and vertical centering. You need to know the exact size of the element
9: absolute absolute positioning, translate movement with conversion, horizontal and vertical centering
Using a percentage of absolute positioning element, and with the use Translate, the mobile positioning center element.
<div class="parent-frame" style="position: relative;">
利用绝对定位，配合translate移动到水平垂直居中。
<div class="child-frame" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
不需知具体大小。支持IE9+及现代浏览器
</div>
</div>
Using the absolute positioning, fitted to a horizontal translate vertically. Know no specific size. Support and modern browser IE9 +
10: The flex layout, setting its properties justify-content, align-items are Center, to achieve horizontal and vertical centering
The flex parent element layouts, and to define two attribute values justify-content, align-items are Center, then the center is defined as the horizontal and vertical
justify-content attribute defines the alignment of the items on the spindle. align-items item attribute defines how to align the cross shaft.
<div class="parent-frame" style="display: flex; justify-content: center; align-items: center">
<div class="child-frame">使用flex布局，justify-content属性定义了项目在主轴上的对齐方式。</div>
<div class="child-frame">
align-items属性定义项目在交叉轴上如何对齐。 两个属性都居中，则水平、垂直居中对齐
</div>
</div>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）The flex layout, justify-content attribute defines the alignment of the items on the spindle. align-items item attribute defines how to align the cross shaft. Two properties are centered, the horizontal, vertically centered
11: using flex layout, with margin: auto use, to achieve horizontal and vertical centering.
Parent element using flex layout, sub-elements using margin: auto
<div class="parent-frame" style="display: flex;">
<div style=" margin: auto;">父元素使用flex布局，子元素配合margin:auto使用</div>
</div>
Parent element using flex layout, sub-elements with margin: auto use