Vertically center page

Vertically center page

I know how to center the text of the page Horizontally ..but is it possible to vertically center page in HTML or CSS?

View Answers

March 14, 2011 at 6:39 PM

You can set the Height, width and left, right alignment for the text in CSS as given below...

Vertically center page in CSS

.className{
    width:300px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-100px 0 0 -150px;
}

March 14, 2011 at 6:40 PM

Vertically center page in JQuery

$(window).resize(function(){

    $('.className').css({
        position:'absolute',
        left: ($(window).width() - $('.className').outerWidth())/2,
        top: ($(window).height() - $('.className').outerHeight())/2
    });

});

// To initially run the function:
$(window).resize();

Ads









Related Tutorials/Questions & Answers:
Vertically center page
Vertically center page  I know how to center the text of the page Horizontally ..but is it possible to vertically center page in HTML or CSS?  ... as given below... Vertically center page in CSS .className{ width:300px
Mozilla Developer Center
Mozilla Developer Center       Great site to get a first look at AJAX. Read full Description
Advertisements
window in center
window in center  if i run the programme thw window is in lie in top left corner i want a window open in center
Open Source Media Center
Open Source Media Center Open source media center for Windows Why buy a Media Center PC when you can make your own - fun project for an old PC "Media Portal turns your PC in a very advanced Multi-Media Center / HTPC
Showing div at the center of the webpage
Showing div at the center of the webpage  Showing div at the center of the webpage
jquery dialog box center
jquery dialog box center  How to create dialog box with center alignment in jquery..?   $('my-selector').dialog('option', 'position', 'center
the center of applied data science
the center of applied data science  Hi, I am beginner in Data...: the center of applied data science Try to provide me good examples or tutorials links so that I can learn the topic "the center of applied data science"
center of applied data science
center of applied data science  Hi, I am beginner in Data Science and machine learning field. I am searching for the tutorials to learn: center... that I can learn the topic "center of applied data science". Also tell
ModuleNotFoundError: No module named 'command-center'
ModuleNotFoundError: No module named 'command-center'  Hi, My... named 'command-center' How to remove the ModuleNotFoundError: No module named 'command-center' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'download-center'
ModuleNotFoundError: No module named 'download-center'  Hi, My... named 'download-center' How to remove the ModuleNotFoundError: No module named 'download-center' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'download-center'
ModuleNotFoundError: No module named 'download-center'  Hi, My... named 'download-center' How to remove the ModuleNotFoundError: No module named 'download-center' error? Thanks   Hi, In your python
How to center a frame
How to center a frame In this tutorial, you will learn how to center a frame... and minimize also. Here we are going to center the frame on the screen. The best way to do this is to use the java.awt.Toolkit api. The given code center
ModuleNotFoundError: No module named 'arcade-game-center-api'
ModuleNotFoundError: No module named 'arcade-game-center-api'  Hi...: No module named 'arcade-game-center-api' How to remove the ModuleNotFoundError: No module named 'arcade-game-center-api' error? Thanks   Hi
ModuleNotFoundError: No module named 'avell-unofficial-control-center'
ModuleNotFoundError: No module named 'avell-unofficial-control-center' ...: ModuleNotFoundError: No module named 'avell-unofficial-control-center' How to remove the ModuleNotFoundError: No module named 'avell-unofficial-control-center' error
ModuleNotFoundError: No module named 'avell-unofficial-control-center'
ModuleNotFoundError: No module named 'avell-unofficial-control-center' ...: ModuleNotFoundError: No module named 'avell-unofficial-control-center' How to remove the ModuleNotFoundError: No module named 'avell-unofficial-control-center' error
ModuleNotFoundError: No module named 'avell-unofficial-control-center'
ModuleNotFoundError: No module named 'avell-unofficial-control-center' ...: ModuleNotFoundError: No module named 'avell-unofficial-control-center' How to remove the ModuleNotFoundError: No module named 'avell-unofficial-control-center' error
ModuleNotFoundError: No module named 'center-tk-window'
ModuleNotFoundError: No module named 'center-tk-window'  Hi, My... named 'center-tk-window' How to remove the ModuleNotFoundError: No module named 'center-tk-window' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'center-tk-window'
ModuleNotFoundError: No module named 'center-tk-window'  Hi, My... named 'center-tk-window' How to remove the ModuleNotFoundError: No module named 'center-tk-window' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'center-tk-window'
ModuleNotFoundError: No module named 'center-tk-window'  Hi, My... named 'center-tk-window' How to remove the ModuleNotFoundError: No module named 'center-tk-window' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'django-email-center'
ModuleNotFoundError: No module named 'django-email-center'  Hi, My... named 'django-email-center' How to remove the ModuleNotFoundError: No module named 'django-email-center' error? Thanks   Hi
ModuleNotFoundError: No module named 'docker-compose-control-center'
ModuleNotFoundError: No module named 'docker-compose-control-center'  ...: No module named 'docker-compose-control-center' How to remove the ModuleNotFoundError: No module named 'docker-compose-control-center' error
ModuleNotFoundError: No module named 'dophon_cloud_center'
ModuleNotFoundError: No module named 'dophon_cloud_center'  Hi, My... named 'dophon_cloud_center' How to remove the ModuleNotFoundError: No module named 'dophon_cloud_center' error? Thanks   Hi
ModuleNotFoundError: No module named 'freshdesk-help-center-backer'
ModuleNotFoundError: No module named 'freshdesk-help-center-backer'  ...: No module named 'freshdesk-help-center-backer' How to remove the ModuleNotFoundError: No module named 'freshdesk-help-center-backer' error
ModuleNotFoundError: No module named 'jenkins-update-center-helper'
ModuleNotFoundError: No module named 'jenkins-update-center-helper'  ...: No module named 'jenkins-update-center-helper' How to remove the ModuleNotFoundError: No module named 'jenkins-update-center-helper' error
ModuleNotFoundError: No module named 'jenkins-update-center-helper'
ModuleNotFoundError: No module named 'jenkins-update-center-helper'  ...: No module named 'jenkins-update-center-helper' How to remove the ModuleNotFoundError: No module named 'jenkins-update-center-helper' error
ModuleNotFoundError: No module named 'kea-call-center'
ModuleNotFoundError: No module named 'kea-call-center'  Hi, My... named 'kea-call-center' How to remove the ModuleNotFoundError: No module named 'kea-call-center' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'keacloud-call-center'
ModuleNotFoundError: No module named 'keacloud-call-center'  Hi...: No module named 'keacloud-call-center' How to remove the ModuleNotFoundError: No module named 'keacloud-call-center' error? Thanks   Hi
ModuleNotFoundError: No module named 'odoo10-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo10-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo10-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo10-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo10-addon-medical-center'
ModuleNotFoundError: No module named 'odoo10-addon-medical-center'  ...: No module named 'odoo10-addon-medical-center' How to remove the ModuleNotFoundError: No module named 'odoo10-addon-medical-center' error? Thanks
ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo11-addon-account-cost-center'

Ads