InfoHeap
Tech
Navigation
  • Home
  • Tutorials
    • CSS tutorials & examples
    • CSS properties
    • Javascript cookbook
    • Linux/Unix Command Line
    • Mac
    • PHP
      • PHP functions online
      • PHP regex
    • WordPress
  • Online Tools
    • Text utilities
    • Online Lint Tools
search
  • Home
  • > Tutorials
  • > CSS cookbook

How to display a div in browser window center

By admin on Dec 31, 2015

To display a div in browser window center we can use css position value fixed. The left and top value of fixed position are relative to visible window. Here is sample code and rendered screenshot for it.
div-position-fixed-window-center

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css" media="screen">
.center {
  position:fixed;
  background:green;
  width:200px;
  height:50px;
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px
}
</style>

Hello world
<div class="center">div in window center</div>
refresh done
try it online

Few points to note

  1. We are using margin-left and margin-top negative value. mergin-left is negative half of div width and margin-top is negative half of div height.
  2. Alternatively we can use left and top css property and use calc function as shown below:

    left:calc(50% - 100px);
    top:calc(50% - 25px);
    

    Note the space before and after minus (-). calc may not work in old IE browsers though.

Suggested posts:

  1. jQuery – load a script with cache enabled
  2. Edit and debug css in Chrome
  3. Javascript – implement class using function
  4. Javascript – catch errors using window.onerror
  5. CSS transform – translateX and translateY
  6. Javascript – remove first item from array
  7. Jenkins – how to delete old builds
  8. CSS – align multiple divs horizontally
Share this article: share on facebook share on linkedin tweet this submit to reddit
Posted in Tutorials | Tagged CSS, CSS cookbook, HTML, Tutorials, Web Development
  • Browse content
  • Article Topics
  • Article archives
  • Contact Us
Popular Topics: Android Development | AngularJS | Apache | AWS and EC2 | Bash shell scripting | Chrome developer tools | Company results | CSS | CSS cookbook | CSS properties | CSS Pseudo Classes | CSS selectors | CSS3 | CSS3 flexbox | Devops | Git | HTML | HTML5 | Java | Javascript | Javascript cookbook | Javascript DOM | jQuery | Kubernetes | Linux | Linux/Unix Command Line | Mac | Mac Command Line | Mysql | Networking | Node.js | Online Tools | PHP | PHP cookbook | PHP Regex | Python | Python array | Python cookbook | SEO | Site Performance | SSH | Ubuntu Linux | Web Development | Webmaster | Wordpress | Wordpress customization | Wordpress How To | Wordpress Mysql Queries | InfoHeap Money

Copyright © 2025 InfoHeap.

Powered by WordPress