Shiny中如何实现div页面垂直水平居中并添加矩形外边框

你可以通过CSS样式直接实现需求，不需要额外依赖包，两种常用写法按需选择即可：

方法1：内嵌样式写法（零额外配置，改完直接用） #

核心是给页面根容器设置满屏高度，用flex布局实现子元素双向居中，再给登录div加边框、内边距和阴影做突出效果，修改后的代码如下：

shinyUI(fluidPage(
  # 根容器占满整个浏览器视口，flex布局实现内部元素居中
  style = "height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 0;",
  useShinyjs(),
  div(
    id = "login",
    align="center",
    # 登录框样式：边框、圆角、内边距、阴影，和页面背景做分层
    style = "border: 2px solid #2c3e50; border-radius: 8px; padding: 32px 48px; background: #ffffff; box-shadow: 0 3px 15px rgba(0,0,0,0.12);",
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter"),
    hidden(verbatimTextOutput("value"))
  ),
  # 其余业务代码
))

关键参数说明：

• height: 100vh：让页面根容器占满浏览器可视区域的全部高度，是垂直居中生效的前提，很多人居中失败都是没给父容器设高度
• justify-content: center/align-items: center：分别控制flex布局下子元素的水平、垂直居中
• 登录div的样式里，border是外轮廓边框，padding避免内部输入框、按钮贴在边框上太拥挤，box-shadow加一层浅阴影让登录框从页面里“浮”起来，突出效果比单纯加边框更好

方法2：独立CSS写法（适合样式复杂的项目） #

如果后续要给页面加更多自定义样式，建议把CSS统一抽离出来写，代码更易维护：

shinyUI(fluidPage(
  useShinyjs(),
  # 统一注册全局样式
  tags$style(HTML("
    html, body {height: 100%; margin: 0;}
    .container-fluid {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #login {
      border: 2px solid #2c3e50;
      border-radius: 8px;
      padding: 32px 48px;
      background: #fff;
      box-shadow: 0 3px 15px rgba(0,0,0,0.12);
    }
  ")),
  div(
    id = "login",
    align="center",
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter"),
    hidden(verbatimTextOutput("value"))
  ),
  # 其余业务代码
))

小提示：如果登录后要展示其他业务内容，直接用shinyjs::hide("login")把登录框隐藏，再显示后续内容模块即可，不会影响其他元素的排版。

内容的提问来源于stack exchange，提问作者LJG