Center and outline a div in Shiny-CodePudding

I have the following snippet:

shinyUI(fluidPage(
  useShinyjs(),
  div(
    id = "login",
    align="center",
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter"),
    hidden(verbatimTextOutput("value"))
  ),
  # rest of the code

How can I position this div in the center of the page (both vertically and horizontally) and put it inside a rectangular outline, so that it stands out from the rest of the page?

Thank you in advance for your help.

CodePudding user response：

You can use CSS in shiny apps and tags (like div). I found the style here.

library(shinyjs)
library(shiny)

ui <- fluidPage(
  div(
    textInput("text_login", "Enter your username", ""),
    actionButton("btn_login", "Enter",style='margin-bottom:20px;'),
    hidden(verbatimTextOutput("value")),
    style='
      margin: 0;
      position: absolute;
      top: 50%;
      left: 50%;
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);')
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)