如何让弹框水平垂直居中？

最新推荐文章于 2024-06-02 17:14:20 发布
最新推荐文章于 2024-06-02 17:14:20 发布
阅读量1.1k 收藏
点赞数
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bennnnnnn/article/details/130203196
版权

要让弹框水平居中和垂直居中，可以使用如下方法：

方法一（使用 flex 布局）

使用 flex 布局，将弹框的父元素设置为 display: flex，并在其子元素上使用 margin: auto 居中即可。

HTML 结构如下：

<div class="modal-container">
  <div class="modal">
    <!-- 弹框内容 -->
  </div>
</div>

CSS 样式如下：

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 宽高根据需求设置 */
  width: 100%;
  height: 100%;
}

.modal {
  margin: auto;
  /* 宽高根据需求设置 */
  width: 300px;
  height: 200px;
}

测试用例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*方法一*/
      .modal-container {
        display: flex;
        justify-content: center;
        align-items: center;
        /* 宽高根据需求设置 */
        width: 100%;
        height: 100%;
      }

      .modal {
        margin: auto;
        /* 宽高根据需求设置 */
        width: 300px;
        height: 200px;
      }
    </style>
  </head>
  <body>
    <!-- 
      方法一：使用 flex 布局，将弹框的父元素设置为 display: flex，并在其子元素上使用 margin: auto 居中即可。
    -->
    <div>
      <img
        src="..\语录.assets\image-20230227094555439.png"
        alt=""
        style="width: 400px"
      />
    </div>
    <div class="modal-container">
      <div class="modal">
        <!-- 弹框内容 -->
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 299px"
        />
      </div>
    </div>
    <div>
      <img
        src="..\语录.assets\image-20230227094555439.png"
        alt=""
        style="width: 400px"
      />
    </div>
  </body>
</html>

运行效果：

image.png

方法二（使用绝对定位）

使用绝对定位，将弹框的左上角定位于页面正中心，需要在其父元素上设置 position: relative，在弹框元素上设置 position: absolute 并使用 top: 50%; left: 50%; transform: translate(-50%, -50%); 居中。

HTML 结构如下：

<div class="modal-container">
  <div class="modal">
    <!-- 弹框内容 -->
  </div>
</div>

CSS 样式如下：

.modal-container {
  position: relative;
  /* 宽高根据需求设置 */
  width: 100%;
  height: 100%;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 宽高根据需求设置 */
  width: 300px;
  height: 200px;
}

测试用例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 方法二 */
      .modal-container {
        position: relative;
        /* 宽高根据需求设置 */
        width: 100%;
        height: 100%;
        background-color: pink;
      }

      .modal {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* 宽高根据需求设置 */
        width: 300px;
        height: 200px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="modal-container">
      whatsup modal-container
      <div>
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 400px"
        />
      </div>
      <div class="modal">
        <!-- 弹框内容 -->
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 300px; padding: 33px 0"
        />
      </div>
      <div>
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 400px"
        />
      </div>
      whatsup modal-container
    </div>
  </body>
</html>

运行结果：

image.png

改变transform: translate的属性值为(50%, 50%)和两个图片块的位置（放到modal-container外面）

image.png

方法三（使用位移方式）

可以使用位移的方式实现弹框水平居中和垂直居中，但是需要明确弹框的宽度和高度，并且需要在样式中对它们进行硬编码。因此，如果弹框内容发生变化，可能需要重新计算样式。

HTML 结构如下：

<div class="modal">
  <!-- 弹框内容 -->
</div>

CSS 样式如下：

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  /* 硬编码弹框的宽度和高度 */
  width: 300px;
  height: 200px;
  /* 计算出 margin-top 和 margin-left 的值 */
  margin-top: -100px;
  margin-left: -150px;
}

测试用例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*方法三*/
      .modal-container {
        background-color: pink;
      }

      .modal {
        position: fixed;
        top: 50%;
        left: 50%;
        /* 硬编码弹框的宽度和高度 */
        width: 300px;
        height: 200px;
        /* 计算出 margin-top 和 margin-left 的值 */
        margin-top: -130px;
        margin-left: -150px;
        background-color: skyblue;
      }
    </style>
  </head>
  <body>
    <div class="modal-container">
      whatsup modal-container
      <div>
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 400px"
        />
      </div>
      <div class="modal">
        <!-- 弹框内容 -->
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 300px; padding: 33px 0"
        />
      </div>
      <div>
        <img
          src="..\语录.assets\image-20230227094555439.png"
          alt=""
          style="width: 400px"
        />
      </div>
      whatsup modal-container
    </div>
  </body>
</html>

运行结果：

image.png

在这个例子中，我们将 .modal 元素的 position 属性设置为 fixed，然后使用 top: 50%; 和 left: 50%; 将其定位在页面的水平和垂直中心。由于 .modal 元素的宽度和高度是硬编码的，我们可以使用 margin-top 和 margin-left 计算出相应的值，以将其居中。在这个例子中，我们将 .modal 元素的垂直位移设置为其高度的一半，即 -100px，将其水平位移设置为其宽度的一半，即 -150px。

虽然位移的方式可以实现弹框水平居中和垂直居中，但是需要对样式进行硬编码，不够灵活，不推荐使用。

小结

以上三种方法都可以实现弹框水平居中和垂直居中，可以根据具体情况选择适合自己的方法。

Bennnnnnn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
弹窗水平垂直居中的设置方式
weixin_49596018的博客
12-13 326
弹窗水平垂直居中的设置方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>水平锤子居中弹窗</title> </head> <body>
弹窗垂直水平居中
Sakura_Momoko
02-28 2001
方法一： //控制弹窗水平垂直居中 var win_width=parseInt(document.body.clientWidth)/2-400; //400为弹窗的宽度的一半 var win_heigth=parseInt(document.body.clientHeight)/2-250; //250为弹窗高度的一半 $(".windowshow"
3、flex弹性盒布局（flex:1?、水平垂直居中、三栏布局）
最新发布
m0_73560798的博客
06-02 1796
任何一个容器都可以指定为 Flex 布局。块元素，行内元素即可。div{span{注意，设为 Flex 布局以后，子元素的floatclear和属性将失效。
弹出框--用css实现div在页面居中（水平垂直居中效果）
热门推荐
qq_26780317的博客
10-10 2万+
前言：在写页面的时候，经常会用到弹出框效果，一般使用插件进行处理，但是有时会出现冲突问题，下文将记录用CSS实现弹出框效果，超级简单，在此记录一下。 一、div宽高固定，使用css实现居中效果 ①当div的宽高固定时，父元素shadow通过absolute定位以后，通过top：50%，left：50%移动到屏幕中央，子元素shadow-bg也absolute定位，通过top,lef...
让弹窗在当前屏幕垂直水平居中
u011042325的博客
09-24 401
position: fixed; /*得是fixed*/ top:50%; left:50%; transform:translate(-50%,-50%); position是absolute，页面如果没有滚动，也能实现垂直水平居中。但是如果页面往下滚动了，再显示弹窗就不是垂直居中了
弹出层（遮罩层）弹出页面垂直居中
09-03
弹出层（遮罩层）弹出页面垂直居中，一个不错的例子，可拿来使用。
bootstrap 模态框（modal）实现水平垂直居中显示
08-31
然而，默认情况下，模态框在页面上的位置并不是水平垂直居中的，而是固定在距离顶部30px的位置，并且左右居中。对于一些特定的设计需求，这可能并不满足。 为了实现Bootstrap模态框的水平垂直居中显示，我们可以...
Element Dialog水平垂直居中样式
facccccer
01-27 3361
前言 Element UI 是目前最火的前端Vue.js UI组件库，但是Dialog默认样式并不是水平垂直居中，这就很让人很尴尬。不过对于有水平垂直居中的需求来说，我们是可以自己进行调整的。最常用的方法也试过了，最终得到以下方法是最佳的（我个人感觉），接下来和大家分享一下。 一、默认样式截图   二、调整后样式截图   三、代码如下： App.vue .el-dialog__wrapper { text-align: center; white-space: nowrap
css,让弹框的内容居中
07-14
这段 CSS 代码将使用 flex 布局，并通过 `align-items: center` 和 `justify-content: center` 属性将内容在弹框容器中垂直和水平居中。 请注意，这只是一种常见的实现方式，具体的实现方式可能会因您的具体需求和...
Bootstrap弹出框水平居中，垂直居中
09-21
Bootstrap弹出框水平居中，垂直居中
bootstrap 的弹窗垂直居中
09-14
引用bootstrap-dialog弹窗插件所以得弹窗都垂直居中了 如： $.imgpic = function(src) { var $textAndPic = $('<div></div>'); $textAndPic.append('<img width="100%" height="100%" src="'+src+'"/>'); BootstrapDialog.show({ title : '图片展示', message : $textAndPic }); };
弹窗居中问题
01-08
弹窗居中问题
jquery实现弹窗功能（窗口居中显示）
12-03
效果图： 代码如下： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹出确认框始终位于窗口的中间位置的测试</title> <style type="text/css"> .mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.5; filter: alpha(opacity=50);
js实现弹窗居中的简单实例
10-21
下面小编就为大家带来一篇js实现弹窗居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
bootstrap模态框放中间_bootstrap多个modal模态框同时设置垂直居中的方法
weixin_29103027的博客
02-15 131
网上目前有很多文章已经讲过了怎样使模态框点击显示的时候垂直居中，基本上是以下方式$modal.on('show.bs.modal', function(){var $this = $(this);var $modal_dialog = $this.find('.modal-dialog');$this.css('display', 'block');$modal_dialog.css({'marg...
css 单元格弹窗水平垂直居中/防止下级滚动
weixin_47239395的博客
04-21 166
.div{ width: 450px; height:380px; padding: 10px; background-color: #fff; border-radius: .16rem .16rem 0 0; position:fixed;//div弹出层防止遮罩下层数据可滚动问题 left:50%; top:50%; margin-left: -225px; //是width的一半 marg...
弹窗 （居中 滚动）
上海刚子的专栏
03-10 494
var $ = require('common:ui/jquery'); function domCenter(opt){ this.options = $.extend({ dom:"", height: 0, domCss:{}, domchange:{}, foot:false, head:false }, opt || {}); this.init(); }
弹框水平垂直居中
飞扬_柳絮的专栏
09-28 1011
在内容大于一屏时，弹框在屏幕上保持水平垂直居中<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="vi
如何使元素水平垂直居中？
06-02
有多种方法可以使元素水平垂直居中，以下是其中两种常用的方法： 1. 使用 flexbox 布局。可以在父元素上设置 display: flex 和 justify-content: center、align-items: center 等属性，来使子元素水平垂直居中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值