Teach with us

How to center a div on the screen using jQuery?

To center a div on the screen, use the jQuery centering function jQuery.fn.center. You can try to run the following code to learn how to center a div on the screen:

Example

Live Demo

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      jQuery.fn.center = function(parent) {
        if (parent) {
          parent = this.parent();
        } else {
          parent = window;
        }
      this.css({
       "position": "absolute",
       "top": ((($(parent).height() - this.outerHeight()) / 2) + $(parent).scrollTop() + "px"),
       "left": ((($(parent).width() - this.outerWidth()) / 2) + $(parent).scrollLeft() + "px")
      });
     return this;
     }
     $("div.myclass:nth-child(1)").center(true);
     $("div.myclass:nth-child(2)").center(false);
   });
</script>
<style>
  div.box {
    width:300px;
    height:300px;
    border:2px solid #000000;
    position:relative;
    top:10px;
    left:10px;
  }
  div.myclass {
    width:50px;
    height:50px;
    color:white;
    background: #000000;
    border-radius: 4px;
    text-align:center;
  }
 </style>
</head>
<body>
  <div class="box">
    <div class="myclass">1<br>parent</div>
    <div class="myclass">2<br>window</div>
  </div>
</body>
</html>
Updated on 20-Jun-2020 08:05:51

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements