垂直（上下）居中的方式：
前提条件：
<div id="parent">
<div id="child">child</div>
</div> ```
parent{
width:200px;
height:200px;
border: 1px solid black;
}
child{
width:100px;
height:100px;
border: 1px solid black;
}
1.
parent {
position:relative;
}
child {
position:absolute;
top:50%;
margin:-50px 0 0 0; /* 这个值要取div高度的一半*/
}
2.
parent{
position: flex;
}
child {
margin: auto;
/*或者*/
align-items: center;
}```
/*这里子元素将会尽可能的填充父元素,内部文字会居中*/
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align:middle;
}```
4.
parent {
position: relative;
}
child {
position: absolute;
bottom: 0;
top: 0;
margin: auto;
}
水平居中：
/子元素 div/
#child {
margin: 0 auto;
}
/父元素 让父元素中的文字水平居中/
#parent {
text-align:center;
}```
比较：
- text-align: 是设置文本的对齐方式，写在包裹文本的标签上
- vertical-align: 设置图片的对齐方式，没有 center 属性值。
内联元素居中
水平居中：
- 行内元素：text-align:center
- flex 布局：display:flex;justify-content:center
垂直居中设置：
- 父元素高度确定的单行文本（内联元素）：height:line-height
- 父元素高度确定的多行文本（内联元素）
- 插入 table，然后设置 vertical-align:middle
- 设置：display:table-cell;vertical-align:middle
块级元素居中
水平居中：
- 定宽块状：margin:auto
- 不定宽：
- 在元素外加入 table 标签（完整的 table,tbody,tr,td），该元素写在 td 内，然后设置 margin 的值为 auto
- 给该元素设置 display:inline
- 父元素设置：position:relative;left:50%
子元素设置：position:relative;left:50%
垂直居中
/*使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;*/
.box{
position:absolute;/*或fixed*/
top:50%;
left:50%;
margin-top:-100px;
margin-left:-200px;
}
/*利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;*/
.box{
position: absolute;或fixed
top:0;
right:0;
bottom:0;
left:0;
margin: auto;
}
/*利用display:table-cell属性使内容垂直居中;*/
.box{
display:table-cell;
vertical-align:middle;
text-align:center;
width:120px;
height:120px;
background:purple;
}
/*使用css3的新属性transform:translate(x,y)属性;*/
.box{
position: absolute;
transform: translate(50%,50%);
-webkit-transform:translate(50%,50%);
-moz-transform:translate(50%,50%);
-ms-transform:translate(50%,50%);
}
/*最高大上的一种，使用:before元素;*/
.box{
position:fixed;
display:block;
background:rgba(0,0,0,.5);
}
.box:before{
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.box.content{
width:60px;
height:60px;
line-height:60px;
color:red;
}
flex 布局：
略
