居中 图片和文字在同一行
参考：http://www.cnblogs.com/thislbq/p/5882105.html
水平居中：
1. 行内元素：通过对父元素加 text-align:center （块级元素：自身加 text-align:center）
行内只有这一种方法，如果要用以下方式可以display：block即可
（text-align:center只对行内元素有效）（块级元素文本居中直接在块级元素上面加就行，其内部的文字（类似于行内元素）也会居中）
2. 块级元素：width:200px;margin:0 auto;
设置margin-left和margin-right同时设置为auto来使其居中。此时元素中必须定义有width，否则填满宽度，谈不上水平居中。
3. margin-left:50%;transform:translateX(-50%)
4. 绝对定位 left：50% ;transform:translateX(-50%)
5. 绝对定位 left:0; right:0; margin:auto; (利用左右外边距，与2类似)
多个块级元素：多个块级一列居中，直接全部块元素margin：0 auto（需要设置宽度）
- display
一行多个块级元素
#outerDiv：{ text-align: center; }
#outerDiv div{
display: inline-block;
}
元素宽度超过一行时，自动变成一列居中排列
- flex
一行多个块级元素
#outerDiv{
display: flex;
justify-content: center;
}
一列多个块级元素
#outerDiv3{
display: flex;
flex-direction:column;
align-items: center;
}
垂直居中：
（1）绝对定位和transform/负margin
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
如果高度已知，可以直接margin-top: 负一半高度;
这里原来想的是不需要绝对定位呀，子元素设置margin-top父亲高度的一半，再translateY。然后发现效果不对。 因为margin-top：50%，参考的其实是父元素的宽度而不是高度！
也可以改变布局：writing-mode:vertical-rl;为纵向排列,那么相对的百分比就是相对于高度了。
用top：50%，配合transform:translateY(-50%)就没有这个问题，可以完美的实现垂直居中。
（2）flex:对父元素设置display:flex;align-items: center;
或者是display:flex;justify-content: center; flex-direction: column;（即改变了主轴方向）
（3）line-hight等于height（只能单行，因为一行就是元素高度，多出来会溢出到元素外面）
height: 100px; line-height: 100px;
（4）table内：设置vertical-align:middle
#box {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
注意：vertical-align属性只对拥有valign特性的html元素起作用，例如表格元素中的
（5）通过对父元素设置上下相等的padding。对于单行多行均有效。（不能设置height，应由其内部行内元素撑开。否则内部元
素无法占满全部height，看起来还是不垂直居中）
div {
padding: 100px 0;
}
水平垂直居中：
- 绝对定位和transform/负margin
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
（2）flex
.parent {
display: flex;
justify-content: center;
align-items: center;
}
（3）绝对定位和margin:auto
.parent {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
}
（4）表格内
#box {
display: table;
}
#child {
width: 50%;
margin: 0 auto
display: table-cell;
vertical-align: middle;
}
图片水平垂直居中
使用 line-height 和 vertical-align
<div id="parent "><img src="tupian.jpg">div>
.parent {
width: 500px;
height: 300px;
line-height: 300px;
}
img{ vertical-align: middle; }
图片文字垂直居中
- 给图片添加CSS属性：vertical-align:middle;
文字
2. 把图片作为背景：（需要已知高度，只适用于单行文字）如果你的图片只是用来作为小图标放在文字的左侧，那就推荐用这个方法。
文字
3.图片和文字设置左浮动，文字加line-height（需要已知高度，只适用于单行文字）(需要设置最小宽度，否则自适应有时会挤成两行)
文字
4.文字相对容器绝对定位（可以多行文字）
文字
5.(和方法1类似)图片和文字都包裹div，对div操作display: inline-block，图片vertical-align: middle（只适用于单行文字）
文字
可继承：
- 字体系列属性 font
- 文本系列：text-align文本水平对齐。line-height：行高。color：文本颜色
- 元素可见性：visibility
代码：
水平居中
Title
1. text-align:center使行内元素居中
直接构建一个具有 ”text-align:center“样式的容器，那么里面包含的行内元素就会都居中了。
I need a job.行内元素：父元素加text-align:center (p 块状元素看起来居中，实际是因为其本身占满宽度，而其内的文字才是真正的居中 )
当一行有两个或以上块级元素需要居中
11. 块级元素一行居中，可以通过display：inline
111
222
333
12. 每个div text-align:center;display:inline; width:70%;宽度超过一行则在竖直方向上居中
I need a job.
aaa
bbb
13. 块级元素一行居中，可以通过display：flex
111111
222222
333333
14. 块级元素一列居中，可以通过display：flex
111111
222222
333333
15. 块级元素一列居中，直接全部margin：0 auto
111111
222222
333333
垂直居中
Title
垂直居中
对父元素设置上下相等的padding, 不能设置height.单行多行有效
2.行内元素 height:100px;line-height:100px 单行有效
表格内 默认就是垂直居中
非表格：外部display:table;内部display: table-cell,vertical-align: middle"
flex 父元素设置display:flex;align-items: center;
块级元素
flex
内部div高度已知 绝对定位 margin负值
绝对定位 top:50%;transform: translateY(-50%)
水平垂直居中
绝对定位 top:50%;水平垂直居中
flex水平垂直居中
margin:auto
非表格布局改为table
表格默认垂直居中
display: table-cell;vertical-align: middle;
4.图片水平垂直居中,使用 line-height 和 vertical-align
5.图片文字垂直居中
1.以图片为背景（需要已知高度）（只适用于单行文字）
2. 给图片加属性vertical-align:middle;（只适用于单行文字）
3.图片和文字设置左浮动，文字加line-height（需要已知高度，只适用于单行文字）(需要设置最小宽度，否则自适应有时会挤成两行)
4.文字相对容器绝对定位（可以多行文字）
5.图片和文字都包裹div，对div操作display: inline-block，图片要vertical-align: middle（只适用于单行文字），这个方法和2类似。。。
参考：
CSS垂直居中的11种实现方式 https://www.cnblogs.com/zhouhuan/p/vertical_center.html