如何让shinydashboard中的box()垂直居中并紧贴主体左侧侧边栏

要同时满足垂直居中和紧贴主体左侧紧邻侧边栏的要求，我们可以通过CSS flex布局调整dashboardBody的样式，同时简化栅格布局结构，具体实现如下：

修改后的完整代码 #

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Connected Boxes"),
  dashboardSidebar(),
  dashboardBody(
    # 设置flex布局实现垂直居中，去掉左侧内边距贴近侧边栏
    style = "display: flex; align-items: center; min-height: calc(100vh - 50px); padding-left: 0;",
    box(
      title = "Middle Box",
      width = 2,
      height = 200,
      # 可选：添加左侧margin避免完全贴边，视觉更舒适
      style = "background-color: #f9f9f9; border-color: #dddddd; margin-left: 15px;"
    )
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

关键调整说明 #

• 垂直居中实现：给dashboardBody添加display: flex和align-items: center属性，配合min-height: calc(100vh - 50px)（减去顶部header的默认高度），让box在垂直方向上始终居中于主体区域。
• 紧贴侧边栏实现：移除dashboardBody默认的左侧内边距（padding-left: 0），同时去掉原本多余的fluidRow和空column，让box直接贴近侧边栏；添加margin-left: 15px是为了优化视觉间距，可根据需求调整或删除。
• 宽度调整：box的width参数可按需修改（bootstrap栅格最大为12），示例中设为2以便更直观查看效果。

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