前言：
眼前你们对“html水平居中”大约比较注意，姐妹们都想要剖析一些“html水平居中”的相关文章。那么小编在网摘上汇集了一些有关“html水平居中””的相关文章，希望我们能喜欢，朋友们一起来学习一下吧！对于前端程序员，你掌握了几种垂直水平居中的方法，现在带你看一看，喜欢的朋友记得点赞加关注，我会定时更新程序员的世界。
1、flex布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { margin: 10px; border: 1px solid red; height: 100vh; display: -webkit-flex; display: flex; /* 关键属性 */ align-items: center; /* 垂直居中 */ justify-content: center /* 水平居中 */ } .item { width: 200px; height: 200px; border: 1px solid lightpink; margin: 0 auto; } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>2、 margin+ position:absolute布局
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { border: 1px solid red; height: 100vh; position: relative; } .item { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 200px; height: 200px; margin: auto; border: 1px solid lightpink; } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>3.transform + absolute<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { border: 1px solid red; height: 100vh; position: relative; } .item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid lightpink; } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>4. absolute+margin负值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { border: 1px solid red; height: 100vh; position: relative; } .item { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; border: 1px solid lightpink; } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>5. absolute + calc<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { border: 1px solid red; height: 100vh; position: relative; text-align: center; } .item { position: absolute; border: 1px solid green; width: 200px; height: 200px; left: calc(50% - 100px); top: calc(50% - 100px); } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>6. line-height + vertical-align<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> </head> <style> #container { border: 1px solid red; height: 100vh; text-align: center; line-height: 100vh; } .item { display: inline-block; line-height: 1.5; border: 1px solid green; vertical-align: middle; } img { width: 100%; height: 100%; } </style> <body> <div id="container"> <div class="item"> <img src="img/avter.jpg" /> </div> </div> </body></html>兼容性说明 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #html水平居中
