一、已知宽高的图片实现垂直水平居中
1.借助margin-top负边距实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在已知图片高度的情况下借助margin-top负边距实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ position:relative; width:500px; height:500px; text-align:center; border:1px solid #e64c65; } img{ position:absolute; top:50%; height:88px; left:0; right:0; margin:auto; margin-top:-44px; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
2.借助额外的块级元素实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在已知图片高度的情况下借助额外的块级元素实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ width:500px; height:500px; text-align:center; border:1px solid #e64c65; } .temp{ height:50%; margin-bottom:-44px; } img{ height:88px; } </style> </head> <body> <div class="wrap"> <div class="temp"></div> <img src="girl.jpg" alt=""/> </div> </body> </html>
二、未知宽高的图片实现垂直水平居中
1.利用line-height 和 vertical-align:middle实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用line-height 和 vertical-align:middle实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ width:500px; height:500px; text-align: center; line-height:500px; border:1px solid #e64c65; margin:100px auto; } img{ vertical-align: middle; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
2.借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>借助高度100%的一个标签，原理vertical-align属性的特性实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ width:500px; height:500px; text-align: center; border:1px solid #e64c65; } img{ vertical-align: middle; } span{ display: inline-block; height:100%; vertical-align: middle; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> <span></span> </div> </body> </html>
3.利用after伪类实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用after伪类实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ width:500px; height:500px; text-align:center; border:1px solid #e64c65; } .wrap::after{ display:inline-block; content:''; height:100%; vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
4.利用table-cell实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用table-cell实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ display:table-cell; width:500px; height:500px; font-size:0; vertical-align: middle; text-align: center; border:1px solid #e64c65; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
5.利用flex弹性布局实现垂直居中实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>利用flex弹性布局实现垂直居中实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ width:500px; height:500px; display: flex; justify-content: center; align-items: center; border:1px solid #e64c65; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
6.利用绝对定位实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>未知图片高度的情况下借助绝对定位实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ position:relative; width:500px; height:500px; border:1px solid #e64c65; } img{ position:absolute; top:0; ; bottom:0; left:0; right:0; margin:auto; } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
7.利用绝对定位+transform实现垂直居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>未知图片高度的情况下借助绝对定位+transform实现垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } .wrap{ position:relative; width:500px; height:500px; border:1px solid #e64c65; } img{ left: 50%; top: 50%; position: absolute; -webkit-transform: translate3D(-50%,-50%,0); -ms-transform: translate3D(-50%,-50%,0); -moz-transform: translate3D(-50%,-50%,0); -o-transform: translate3D(-50%,-50%,0); transform: translate3D(-50%,-50%,0); } </style> </head> <body> <div class="wrap"> <img src="girl.jpg" alt=""/> </div> </body> </html>
效果：
作者：smile.轉角
QQ：493177502