【CSS】fixed绝对定位水平垂直居中不随滚动条而移动

ゞ 浴缸里的玫瑰 2022-05-24 23:07 290阅读 0赞 
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style> .fixed{ width: 300px; height: 150px; background-color: red; position: fixed; top: 50%; margin-top: -75px; left: 0; right: 0; margin:0 auto; } li{ height: 100px; } </style>
  9. </head>
  10. <body>
  11.     <div class="fixed">fixed绝对居中</div>
  12.     <ul>
  13.         <li>1</li>
  14.         <li>2</li>
  15.         <li>3</li>
  16.         <li>4</li>
  17.         <li>5</li>
  18.         <li>6</li>
  19.         <li>7</li>
  20.         <li>8</li>
  21.         <li>8</li>
  22.         <li>8</li>
  23.         <li>8</li>
  24.         <li>8</li>
  25.         <li>8</li>
  26.         <li>8</li>
  27.         <li>8</li>
  28.         <li>8</li>
  29.         <li>8</li>
  30.         <li>8</li>
  31.         <li>8</li>
  32.     </ul>
  33. </body>
  34. </html>

动图演示：

这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读