方法一:利用定位(常用方法,推荐)
javascript"><style>
.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;
}
</style>
方法二:利用 margin:auto;
javascript"><style>.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;}
</style>
方法三:利用 display:flex;设置垂直水平都居中
javascript"><style>.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;}
</style>
方法四:利用 transform
javascript"><style>.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%;transform:translate(-50%, -50%);}
</style>