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();









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 DescriptionADS_TO_REPLACE_1
Advertisements
center a table
center a table  How do I center a table
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
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
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 '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 '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
how to display the image in center - Ajax
how to display the image in center  i want to dispaly the image as center of the screen using javascript..while i am clicking the button ..any one give me the code for this one
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
jsf center tag needed - Java Server Faces Questions
jsf center tag needed  which tag we have to use for center in JSF. normally in html we are using tag. like that i need my submitt button in center in my JSF page. give me the solution. thanks in advance.  Hi friend
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 '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 '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'
ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' error
ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo8-addon-account-cost-center' error
ModuleNotFoundError: No module named 'odoo9-addon-account-cost-center'
ModuleNotFoundError: No module named 'odoo9-addon-account-cost-center' ...: ModuleNotFoundError: No module named 'odoo9-addon-account-cost-center' How to remove the ModuleNotFoundError: No module named 'odoo9-addon-account-cost-center' error
ModuleNotFoundError: No module named 'recast-control-center-prototype'
ModuleNotFoundError: No module named 'recast-control-center-prototype' ...: ModuleNotFoundError: No module named 'recast-control-center-prototype' How to remove the ModuleNotFoundError: No module named 'recast-control-center-prototype' error
ModuleNotFoundError: No module named 'ru-center-backup'
ModuleNotFoundError: No module named 'ru-center-backup'  Hi, My... named 'ru-center-backup' How to remove the ModuleNotFoundError: No module named 'ru-center-backup' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'team_center_api'
ModuleNotFoundError: No module named 'team_center_api'  Hi, My... named 'team_center_api' How to remove the ModuleNotFoundError: No module named 'team_center_api' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'team_center_api'
ModuleNotFoundError: No module named 'team_center_api'  Hi, My... named 'team_center_api' How to remove the ModuleNotFoundError: No module named 'team_center_api' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'team_center_api'
ModuleNotFoundError: No module named 'team_center_api'  Hi, My... named 'team_center_api' How to remove the ModuleNotFoundError: No module named 'team_center_api' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'zendesk-help-center-backer'
ModuleNotFoundError: No module named 'zendesk-help-center-backer'  Hi...: No module named 'zendesk-help-center-backer' How to remove the ModuleNotFoundError: No module named 'zendesk-help-center-backer' error? Thanks
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 '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 '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
PHP GD center text
which is center of image.'; $textcolor = ImageColorAllocate($im, 255, 0, 0..._width * strlen($text); $position_center = ceil(($width - $text_width) / 2..., $position_center, $position_middle, $text, $textcolor);ADS_TO_REPLACE_6 header("
minor project on service center management in core java
minor project on service center management in core java  I need a minor project on service center management in core java...If u have then plz send me
How can I Define a JFrame subclass that has four vertically positioned buttons. - Java Beginners
How can I Define a JFrame subclass that has four vertically positioned buttons.  How can I Define a JFrame subclass that has four vertically positioned buttons. The labels for the four buttons are Senior, Junior, Sophomore
How to display the font in center
How to display the font in center       This section illustrates you how to display the font in center. To display the font in center, the method paint() is defined
Java Help Center
Java Help Center       Welcome to Java help Center service of RoseIndia.net, a renowned Java tutorial website that provides you the latest and up
ModuleNotFoundError: No module named 'adafruit-circuitpython-ble-apple-notification-center'
-notification-center'  Hi, My Python program is throwing following error...-notification-center' How to remove the ModuleNotFoundError: No module named 'adafruit-circuitpython-ble-apple-notification-center' error? Thanks
How to attach file to HP Quality Center [QC] using java
How to attach file to HP Quality Center [QC] using java  Hello All, Do any one know how to upload attachments to QC Test Case Run Instance using java In QC we have <BR> Test Lab<BR> |_Test Set Instcance<

Ads