方法一:利用定位(常用方法,比较推荐)
.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;}