html图片上下居中的源代码,css水平、垂直居中的写法，请至少写出4种？

方法一：利用定位(常用方法，比较推荐)

.parent{ width:500px, height:500px, border:1px solid #000, position:relative } .child{ width:100px, height:100px, border:1px solid #999, position: absolute; top: 50%, left: 50%; margin-top: -50px margin-left: -50px }

方法二：利用 margin:auto;

.parent { width: 500px; height: 500px; border: 1px solid #000; position: relative;} .child { width: 100px; height: 100px; border: 1px solid #999; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; }

方法三：利用 display:table-cell

.parent { width: 500px; height: 500px; border: 1px solid #000; display: table-cell; vertical-align: middle; text-align: center;} .child { width: 100px; height: 100px; border: 1px solid #999; display: inline-block;}

方法四：利用 display：flex;设置垂直水平都居中

.parent { width: 500px; height: 500px; border: 1px solid #000; display: flex; justify-content: center; align-items: center;} .child { width: 100px; height: 100px; border: 1px solid #999;}