css-弹窗内容居中显示

最新推荐文章于 2022-10-14 00:51:01 发布
最新推荐文章于 2022-10-14 00:51:01 发布
阅读量573 收藏
点赞数
分类专栏： css布局 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38254123/article/details/112984161
版权
本文介绍了如何使用CSS实现弹窗内容的水平和垂直居中显示。通过设置margin和利用transform的translateY属性，可以实现兼容IE的居中效果。此外，还提到了背景遮罩的创建方法及内容超出时的滚动条样式。
摘要由CSDN通过智能技术生成

css-弹窗内容居中显示

html结构：


<div class="js-mask">
    <div class="js-mask-main">
        <p class="main-title">弹窗标题</p>
        <ul class="main-con page-scroll-y">
            <li>
                <h3>内容一：</h3>
                <div class="text">
                    <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
                    <p>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容</p>
                </div>
            </li>
            <li>
                <h3>内容二：</h3>
                <div class="text">
                    <p>
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                        我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容

                    </p>
                </div>
            </li>
最低0.47元/天 解锁文章
A0-好孩纸
关注
专栏目录
css实现弹窗上下左右居中且背景透明锁定窗口
m0_50012373的博客
12-22 534
css实现弹窗上下左右居中且背景透明锁定窗口 有一种简单的css方法实现点击之后的弹出框上下左右居中且附加灰色透明遮罩锁定窗口清除滚动条 html代码 <div class="box"> <div class="boxs"> <!-- 白色弹窗 --> </div> </div> css代码 html, body { width: 100%; height: 100%; } .box { dis
弹出框--用css实现div在页面居中（水平垂直居中效果）
qq_26780317的博客
10-10 2万+
前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。 一、div宽高固定，使用css实现居中效果 ①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,lef...
css 实用技巧 —— 永远居中的弹窗
朝阳39的博客
04-08 675
<template> <div> <button @click="showDialog = true">打开弹窗</button> <div class="container" v-if="showDialog"> <div class="dialog">永远居中的弹窗</div> </div> </div> &.
CSS布局案例 9-51 网页弹窗居中效果
dpl12的博客
05-05 510
文章目录前言实现过程1.步骤2.代码3.效果 前言 使用css3实现网页弹窗居中效果。 实现过程 1.步骤 网页弹窗居中效果实现四个方法: 1、定位+magin值 2、定位+transform的移动 3、left:0 right:0 top:0 bottom:0 magin:auto 4、弹性盒 2.代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <
css实现弹出窗口始终垂直水平居中
sunny327的专栏
08-11 8538
<!DOCTYPE html>html> head> meta charset=" utf-8"> meta name="author" content="http://www.softwhy.com/" /> title>蚂蚁部落title> style type="text/css"> body{   height
CSS面试题(一)-如何实现弹窗居中功能？
优亿网络工作室的博客
03-25 931
面试中，面试官可能经常问到我们如何在高度宽度不一定，不能使用JS下实现一个弹窗功能，下面我将贴出一个常见的实现方法:主要实现思路为：使用伪类元素是实现居中，该方法优点是可以被body包裹的任意位置使用，缺点是IE9以下不支持。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;ti...
jquery实现弹窗功能（窗口居中显示）
10-18
这种实现方式不仅增强了用户体验，而且通过将弹窗居中，确保了信息传达的有效性。当然，在实际应用中，我们可能还需要根据具体的样式和功能要求，进一步调整CSS样式和JavaScript代码来满足不同的交互和视觉设计需求...
基于vue的大屏实现弹窗水平垂直居中，点击弹窗外围自动关闭弹窗
m0_51277853的博客
08-09 1307
利用绝对定位定义一个最大的盒子(.big_content)，让其完全覆盖屏幕，再在其中写弹窗，弹窗的水平垂直居中通过对(.big_content)进行flex布局实现。 阻止点击事件冒泡触发
Js控制弹窗实现在任意分辨率下居中显示
10-27
通过以上知识点的详细解读，可以看到实现任意分辨率下的弹窗居中并不是一个简单的过程，它涉及到对DOM的操作、CSS样式的动态调整以及事件监听和处理等前端开发技能。而熟练掌握这些技能，对于Web开发人员来说是非常...
css弹出窗口80%居中,适配性绝佳的全屏居中弹出框（不定高）
weixin_34553415的博客
08-03 1046
弹窗和垂直居中是大家常听到和常用到的知识点和内容，我这里给大家分享下适配超好的案例。希望大家一起学习进步内容占位.container {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,.5);text-align: center;white-space: nowrap;font-size: 0;z-i...
CSS 居中定位的弹窗效果（源码超详细解释）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
10-14 3378
这是一个超详细的 CSS实现居中定位弹窗效果源码解析，如果看完这篇文章还没学明白，小编劝你趁年轻赶紧改行！ 弹窗一般有两种情况： 弹窗的尺寸是已知的（宽高都是固定的）； 弹窗尺寸是未知的（内容不固定，弹窗高度随内容改变）； 本篇文章会对这两种情况，各给出2种解决方法。每一种方法的实现源码解释都超详细！！
css弹出窗口80%居中,CSS弹出DIV 在窗口居中位的例子
weixin_31002061的博客
08-03 132
提示：您可以先修改部分代码再运行 CSS Position 定位实现 DIV 在窗口居中 .dialog{ position: fixed; _position:absolute; z-index:1; top: 50%; left: 50%; margin: -141px 0 0 -201px; width: 400px; height:280px; b...
html如何让弹窗居中,css实现一个垂直水平居中弹窗的三种方式
weixin_42500791的博客
06-22 932
方法一：//遮罩层.bg{width:100%;height:100%;left:0;top:0;position:fixed;background:rgba(0,0,0,0.3);}.point{position:absolute;left:50%;top:50%;}.pop{width:500px;height:500px;position:absolute;left:-250px;top:-...
css弹窗屏幕居中
ccsdn的博客
08-21 5106
position:fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -ms-transform::translateX(-50%) translateY(-50%); -moz-transform::translateX(-50%) translateY(-50%); -webkit-transform:...
弹出框页面居中显示的两种方法
热门推荐
chueia的博客
03-31 2万+
第一种 position:fixed; top:0; right:0; left:0; bottom:0; margin:auto; 这种方法在元素的宽高不固定时会全屏拉伸元素，在高度不固定靠子元素撑开自适应的情况下不适用。但是在宽高固定的情况下可以用，没有兼容性问题。 第二种 position:fixed; top:50%; left:50%; transform:transl
使用css 控制弹出框始终水平居中
du_peiduo的专栏
12-02 3641
使得弹出框的 position:fixed; 距离左侧 left:50%; 然后再知道弹出框宽度的情况下像左偏移 宽度的1/2即可 .invite-dialog { margin-left: -144px; position: fixed; left: 50%; width: 288px; min-height: 166px; background: white;
css实现弹出框在页面居中
gll77
07-31 5033
css简单方法实现弹出框在页面居中
css弹出窗口80%居中,css实现弹出窗体始终垂直水平居中
weixin_30615567的博客
08-03 570
jQuery弹出层始终垂直居中相对于屏幕或当前窗口把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...div&plus;css实现未知宽高元素垂直水平居中div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题...
封装一个弹窗后 弹窗不居中了
最新发布
05-17
如果你使用的是 JavaScript 和 CSS 来实现弹窗，可以尝试以下几种方法： 1. 使用 CSS 居中弹窗。可以在弹窗的 CSS 样式中添加以下代码来实现： ``` position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); ``` 2. 在 JavaScript 中动态计算弹窗位置。可以在弹窗打开时，先获取窗口的宽度和高度，然后计算出弹窗应该出现的位置，再将其设置为弹窗的样式。 ``` var popup = document.getElementById('popup'); var screenWidth = window.innerWidth; var screenHeight = window.innerHeight; var popupWidth = popup.offsetWidth; var popupHeight = popup.offsetHeight; popup.style.left = (screenWidth - popupWidth) / 2 + 'px'; popup.style.top = (screenHeight - popupHeight) / 2 + 'px'; ``` 3. 使用现成的弹窗插件，它们通常都有自己的居中方法和样式，可以减少你的工作量。例如 Bootstrap 中的 Modal 插件，或者 jQuery UI 中的 Dialog 插件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值