分享一个垂直水平居中的方法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>烨湘伦认证窗口</title><style>.fa{height: 500px;width: 500px;background-color: rgb(165, 38, 38);}.ch{height: 100px;width: 100px;background-color: rgb(40, 60, 121);}</style></head><body><div class="fa"><div class="ch"></div></div></body></html>
如上，使蓝色方块垂直水平居中于红色方块，先设置红色为相对定位 position: relative;，再设置蓝色方块为绝对定位 position: absolute;，（子绝父相，pink老师的总结嘿嘿），再设置蓝色方块left和right的值相等,top和bottom的值相等以及外边距为auto，如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>烨湘伦认证窗口</title><style>.fa{height: 500px;width: 500px;background-color: rgb(165, 38, 38);position: relative;}.ch{height: 100px;width: 100px;background-color: rgb(40, 60, 121);position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}</style></head><body><div class="fa"><div class="ch"></div></div></body></html>
即可实现蓝色方块垂直水平居中于红色方块
如果觉得《绝对定位垂直水平居中方法》对你有帮助，请点赞、收藏，并留下你的观点哦！
