分享一个垂直水平居中的方法
<!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>
即可实现蓝色方块垂直水平居中于红色方块