position primefaces dialog at the center of the screen

Question

There are quite a few dialogs in different pages, and to position them at the center of the screen, I wanted to apply one css. This however didn't work.

   .ui-dialog{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -100px;
  }

On adding .ui-dialog-content, ui-dialog-titlebar to the css, some parts of the dialog showed in the top left corner, some at the center, and some overlapped. How do I make the dialog box pop up at the center of the screen. Thanks

On the showcase primefaces.org/showcase/ui/dialog.jsf every pop-up dialog appears centered on Google Chrome (22.0.1229.94). — Akos K

damian damian · Accepted Answer · 2012-11-01T14:32:53

you should not use CSS to center primefaces dialogs. by default, they are centered. so I suggest that you remove any custom css to center dialogs, and if still dialogs are not centered submit an issue to primefaces.

position primefaces dialog at the center of the screen

1 Answers