How to center ISE content in a frame.

[Oliver Laue]

Hi,

did somebody has a code snippet to center the guest portal login box vertically?

all of my attempts lead to a complete deformation of the box.

[Jason Kunst]

You would like the same space above and below the login box regardless of the page size? Can you send a screenshot of what you have now?

[Oliver Laue]

Hi,

looks like it's placed correct in the center of the screen but as you can see it's a bit smaller than normal

screen:

code:

<style>

.cisco-ise-main-content {

position: fixed;

top: 50%;

left: 50%;

margin-right: -50%;

-webkit-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

</style>

[Jason Kunst]

thanks and this is using CSS?

[Oliver Laue]

according to w3c yes.

[Jason Kunst]

Are you putting this into the CSS file and uploading it as a theme? Where/how is the code being introduced to the portal

[Oliver Laue]

doesn't matter if you put this in an optional content box or in the css itself.

Currently i paste this in the optional content field.

[Jason Kunst]

Thanks I will check to see how to make this work, it may take a couple days

[Jason Kunst · Accepted solution]

Try this one out

<style>

    .cisco-ise-main-content {
        position: fixed;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    #ui_login_content_label,
    #ui_login_instruction_message {
        margin: 0 ! important ;
        width: 100% ;
    }

    @media(max-width: 80em) {

        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 280px;
        }
    }
    @media all and ( min-width: 60em ) {
        
        #ui_login_content_label,
        #ui_login_instruction_message {
            max-width: 380px ! important ;
        }
    }

</style>

[Oliver Laue]

Thank you Jason

looks like the media setting isn't applied correctly. But that's fine for me.

[Jason Kunst]

Can you explain

Also do you have final screenshot

Thanks

[Oliver Laue]