图片在section上下居中_盒子水平垂直居中的8种方法

子盒子在父盒子中垂直水平居中：

① 标准流布局

section{

width: 400px;

height: 400px;

background-color: cyan;

overflow: hidden;

}

article{

width: 200px;

height: 200px;

background-color: purple;

margin: 0 auto;

margin-top: 100px;

}

② 子绝父相

一：根据具体宽度调整：

section{

width: 400px;

height: 400px;

background-color: cyan;

position: relative;

}

article{

width: 200px;

height: 200px;

background-color: purple;

position: absolute;

top:100px;

left: 100px;

margin-top:-100px;

margin-left: -100px;

}

二：通过百分比绝对定位

section{

width: 400px;

height: 400px;

background-color: cyan;

position: relative;

}

article{

width: 200px;

height: 200px;

background-color: purple;

position: absolute;

top:50%;

left: 50%;

margin-top:-100px;

margin-left: -100px;

}

三：浮动流自我调节

section{

width: 400px;

height: 400px;

background-color: cyan;

position: relative;

}

article{

width: 200px;

height: 200px;

background-color: purple;

position: absolute;

top:0;

right:0;

bottom:0;

left:0;

margin:auto;

}

③ position+translate

section{

width: 400px;

height: 400px;

background-color: cyan;

position: relative;

}

article{

width: 200px;

height: 200px;

background-color: purple;

position: absolute;

left:50%;

top: 50%;

transform:translate(-50%,-50%);

}

④ Flex布局

section{

width: 400px;

height: 400px;

background-color: cyan;

display: flex;

justify-content: center;

align-items: center;

//flex-flow:column wrap;

}

⑤ Flex布局+margin：auto；

/*第五种 flex弹性布局 */

section{

width: 400px;

height: 400px;

background-color: cyan;

display: flex;

}

article{

width: 200px;

height: 200px;

background-color: purple;

margin:auto;

}

⑥ 表格table属性：

section{

width: 400px;

height: 400px;

background-color: cyan;

display: table-cell;

vertical-align: middle;

text-align: center;

}

article{

width: 200px;

height: 200px;

background-color: purple;

display: inline-block;

vertical-align: middle;

}