首页<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .max{ width: 800px; float: left; margin: 0 auto; } .mink1{ float: left; margin-top: 20px; width: 100px; height: 24px; border-right: 1px solid #888888; text-align: center; } .mink1:hover{ cursor: pointer; border-bottom: 2px red solid; } </style> </head> <body> <div class="max"> <div class="mink1"> 腾讯视频 </div> <div class="mink1"> 爱奇艺 </div> <div class="mink1"> QQ </div> <div class="mink1"> bibi </div> <div class="mink1"> 微信 </div> <div class="mink1"> 咪咕视频 </div> <div class="mink1"> 回收站 </div> </div> </body> </html>如何居于页面中间

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .max{ width: 800px; float: left; margin: 0 auto; } .mink1{ float: left; margin-top: 20px; width: 100px; height: 24px; border-right: 1px solid #888888; text-align: center; } .mink1:hover{ cursor: pointer; border-bottom: 2px red solid; } </style> </head> <body> <div class="max"> <div class="mink1"> 腾讯视频 </div> <div class="mink1"> 爱奇艺 </div> <div class="mink1"> QQ </div> <div class="mink1"> bibi </div> <div class="mink1"> 微信 </div> <div class="mink1"> 咪咕视频 </div> <div class="mink1"> 回收站 </div> </div> </body> </html>如何居于页面中间

时间: 2023-06-24 16:05:23 浏览: 248

可以通过以下方式将该 div 居中： 1. 设置该 div 的左右 margin 为 auto： ```css .max { width: 800px; margin: 0 auto; } ``` 2. 使用 flex 布局，将该 div 的父元素设置为 flex 容器，并设置 justify-content 和 align-items 属性为 center： ```css body { display: flex; justify-content: center; align-items: center; } .max { width: 800px; } ``` 3. 使用绝对定位，将该 div 的父元素设置为相对定位，然后将该 div 设置为绝对定位，并设置 left 和 top 属性为 50%，再通过 transform 属性将该 div 向左上方平移自身宽度和高度的一半： ```css body { position: relative; } .max { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; } ```

阅读全文