在前端开发中，模态框（modal）是一个常见的组件，用于展示一些交互式的信息或者操作。Bootstrap 是一个流行的前端框架，提供了很多易于使用的组件和工具，其中就包括了模态框。本文将介绍如何使用 Bootstrap 实现模态框的水平垂直居中显示。
实现方法
要实现模态框的水平垂直居中显示，我们需要结合几个特性：
- Bootstrap 模态框组件提供了
flexbox布局，可以方便地实现水平和垂直居中。 - Bootstrap 模态框的默认样式为绝对定位（
position: absolute;），因此我们需要通过 CSS 修改其位置属性。 - Bootstrap 模态框的大小可以通过添加 CSS 类来指定。
HTML 结构
首先，我们需要在 HTML 中定义模态框的结构。以下是一个基本的例子：
-- -------------------- ---- -------
---- ------ ---
------- ------------- ---------- ------------ ------------------- -----------------------
-----
---------
---- --- ---
---- ------------- -------------
---- ---------------------
---- ----------------------
---- ----- ---
---- ---------------------
--- ------------------------------
------- ------------- ------------- -------------------------------------
------
---- ----- ---
---- -------------------
-----------------
------
---- ----- ---
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------------------
------
------
------
------模态框触发器可以是任何元素，只需要添加 data-toggle="modal" 和 data-target="#myModal" 属性即可。其中 data-target 属性指定了要打开的模态框的 ID。
模态框的 HTML 结构包括三个部分：模态框对话框（.modal-dialog）、模态框内容（.modal-content）和模态框头、体、尾（.modal-header、.modal-body、.modal-footer）。其中，模态框对话框和内容是必须的，而头、体和尾则是可选的。
CSS 样式
接下来，我们需要添加一些 CSS 样式来实现模态框的居中显示。以下是一个基本的例子：
-- -------------------- ---- ------- -- ----- -- ------ - -------- ---- ----------- ------------ ------- ---------------- ------- - -- -------- -- ------------- - ---------- ---- - -- ---------- -- -------------- - ----------- ----- ----------- ----- -
在上面的 CSS 样式中，我们使用 flexbox 布局将模态框居中显示。同时，我们还限制了模态框和内容的宽度和高度，以确保其适应不同的屏幕大小。
JavaScript 代码
最后，我们需要添加一些 JavaScript 代码来处理模态框的显示和隐藏。以下是一个基本的例子：
$(document).ready(function(){
// 当模态框显示时
$('.modal').on('show.bs.modal', function (e) {
// 计算模态框的垂直偏移量
var modalHeight = $(this).find('.modal-dialog').outerHeight();
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/858) ，转载请注明来源
[https://www.javascriptcn.com/post/858](https://www.javascriptcn.com/post/858)