块、行内块水平垂直居中

1.定位实现水平垂直居中

复制代码
<div class="outer">
        <div class="test inner1">定位实现水平垂直居中</div>
    </div>

<style>
 .outer {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            margin: 100px auto 0;
            position: relative;
       }
       .test {
            width: 100px;
            height: 100px;
            background-color: orange;
           
       }
       .inner1 {
             /* 方法一 定位*/
             position: absolute;
            /* 相对于包含块,最近的定位的祖先或父元素 */
            top: 50%; 
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
       }
</style>

2.定位+位移

复制代码
<div class="outer">
        <div class="test inner2">定位+位移</div>
    </div>
<style>
.outer {
            width: 300px;
            height: 300px;
            border: 1px solid gray;
            margin: 100px auto 0;
            position: relative;
       }
       .test {
            width: 100px;
            height: 100px;
            background-color: orange;
           
       }
       .inner2 {
            position: absolute;
            top: 50%;
            left: 50%;
            /*方法二  translate中的百分比是相对自身,50% 相当于100*50% = 50*/
            transform: translate(-50%, -50%);
       }
</style>

3.相对于整个视口水平垂直居中

复制代码
 <div class="view">相对于整个视口水平垂直居中</div>
    <style>
       
       body {
            position: relative;
        }
        /* 方法三 */
       .view {
            width: 100px;
            height: 100px;
            background-image: linear-gradient(red, yellow, green);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
       }
    </style>

4.flex+margin

复制代码
<head>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: gray;
            display: flex;
        }
        .inner {
            width: 100px;
            height: 100px;
            margin: auto;
            background-image: linear-gradient(green, yellow);
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
  1. flex 水平垂直居中

    <head> <style> .outer { width: 400px; height: 400px; background-color: gray; display: flex; /* 水平居中 */ justify-content: center; /* 垂直居中 */ align-items: center; } .inner { width: 100px; height: 100px; background-image: linear-gradient(green, yellow); } </style> </head> <body>
    </body>

6.遮挡层

复制代码
<div class="item"></div>

/* 遮挡层 */
       .item {
             background-image: repeating-linear-gradient(red 200px, yellow 500px, green 700px);
            opacity: 0.5;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0; 
       }
相关推荐
打不着的大喇叭32 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code38 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟40 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript