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

ゞ浴缸里的玫瑰 2022-05-24 23:07 221阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <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>
    </head>
    <body>
        <div class="fixed">fixed绝对居中</div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
            <li>8</li>
        </ul>
    </body>
    </html>

动图演示：

![这里写图片描述][70]

[70]: /images/20220525/f90c11b3bdbf4eaf8a6f6e73d8072cc4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，221人围观）

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

相关阅读

相关绝对定位水平垂直居中（HTML、CSS）

绝对定位水平垂直居中（HTML、CSS） <!DOCTYPE html> <html lang="en"> <head>

电玩女神/ 2023年10月03日 13:24/ 0 赞/ 24 阅读

相关绝对定位水平垂直居中

1.绝对定位水平垂直居中 <style> .box { position: absolute;

你的名字/ 2023年02月13日 14:57/ 0 赞/ 194 阅读

相关 css中让绝对定位的盒子水平或者垂直居中！！

这是一个标准流盒子，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta chars

深碍√TFBOYSˉ_/ 2022年10月24日 13:15/ 0 赞/ 157 阅读

相关 css定位“十字架“之水平垂直居中

1.先看要实现的效果 ![这里写图片描述][20150518215503867] 实际的效果图 ![这里写图片描述][20150518215635783] 可以

╰半夏微凉°/ 2022年08月08日 12:57/ 0 赞/ 27 阅读

相关【CSS】绝对定位元素的水平居中和垂直居中

居谁的中呢，相对于谁绝对定位，就是居谁的中了。若是水平居中的话，将该绝对定位的元素添加这个样式： left: 0; right: 0; margi

柔情只为你懂/ 2022年06月07日 11:39/ 0 赞/ 261 阅读

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年05月24日 23:07/ 0 赞/ 222 阅读

相关 css 通过绝对定位实现水平垂直居中

知识点： margin: auto; 效果图： ![70][] 代码： html: <div class="outer"> <div

r囧r小猫/ 2022年05月13日 11:40/ 0 赞/ 282 阅读

相关水平垂直居中

文档 [转载][Link 1] div绝对定位水平垂直居中(未知容器，已知元素宽高) 方案一：margin:auto实现绝对定位元素的居中 <!DO

青旅半醒/ 2022年01月19日 23:47/ 0 赞/ 430 阅读

相关 css position: fixed; 垂直居中,绝对定位居中

.boxout{ background:fff; z-index: 111;===display:none; box-shadow: 0

缺乏、安全感/ 2021年09月26日 01:26/ 0 赞/ 535 阅读

相关水平垂直居中

几种水平垂直居中固定宽高 1. margin 负值 <div class="a"> <div class="a1"></div>

﹏ヽ暗。殇╰゛Y/ 2021年08月30日 01:18/ 0 赞/ 563 阅读