Member Avatar for Argo54325

Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.

here is an example as to what I'm looking for:

Edited by Argo54325 because: spelling mistake in title
  • 7 Contributors
  • 8 Replies
  • 134 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

A short, modern answer that avoids tables and extra JS. The goal is a fixed 650×450 box centered in the browser while the page is liquid. Several replies are on the right track: is correct that auto margins handle horizontal centering only, and ’s jQuery approach works but needs a resize handler to stay centered after window changes. Instead of JS, use CSS-only methods below — they re-center automatically on resize and are simpler and more robust than table hacks suggested by .

Use transform centering when you want the box centered relative to the viewport (stays put while scrolling):

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 450px;
  transform: translate(-50%, -50%);
}

If the box must be centered inside a page container (not the viewport), switch position: fixed to position: absolute and ensure the parent is position: relative.

If you control the page layout and prefer a semantic container, flexbox is very convenient:

html, body { height: 100%; margin: 0; }
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.center { width: 650px; height: 450px; }

Caveats and small-screen handling: if the viewport is smaller than 650×450, add sensible limits and scrolling inside the box, e.g. max-width: calc(100vw - 20px); max-height: calc(100vh - 20px); overflow: auto;. For very old browsers that lack transform/flex support, keep a JS fallback (your existing jQuery code will work if you bind it to resize as suggested). Avoid using table markup for layout — it harms accessibility and semantics.

Recommended Answers

All 8 Replies

Member Avatar for qazplm114477

Hello, could someone tell me how i could position a div tag exactly in the center of the browser being liquid and the div tag size fixed to 650px by 450px.

here is an example as to what I'm looking for:

try

/*CSS*/

#div_id{position:absolute; top:0; left:0; width:100%; z-index:100;}
Member Avatar for ko ko

Use auto margin to center the div tag.

div {
     margin: 0 auto;
     width: 650px;
   }

I have no idea to stay exactly center at vertical alignment. Note that auto margin need static width.

Member Avatar for macneato

So let me get this straight.

You have a container that is liquid (so basically window), and you would like to center a div, 650px by 450px. Horizonal is easy,

margin: 0 auto

Getting it vertically, we would have to go jquery

Here is a link from stackoverflow

Member Avatar for Dragennd

Typically the way I center my layers is to make them relatively positioned and place them inside a table.

<html>
<head>
<style type="text/css">
.layer1 {
z-index: 1;
position: relative;
width: 500px;
height: 600px;
background-color: #000000;
}
</style>
</head>

<body>
<table align="center" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center">
<div class="layer1"></div>
</td></tr></table>
</body>
</html>

Simply put a table that equals the whole size of the page and make the layer relative so the table can center it. Remember a div layer that is relatively positioned is relatively located to where you originally start it. Being centered in the middle of the table thats where it starts.

For a working reference check my website and look at the code. I put my primary layer in a table and relatively position it with all layers inside it absolutely positioned to the edge of the relative layer.

Member Avatar for Argo54325

So let me get this straight.

You have a container that is liquid (so basically window), and you would like to center a div, 650px by 450px. Horizonal is easy,

margin: 0 auto

Getting it vertically, we would have to go jquery

Here is a link from stackoverflow

Using the JQuery worked well, though there is a new issue. If i resize the window the div stay centered to the proportions of the window when it first loaded, so the liquid part i wanted is still missing. What can i do to fix it?

<html>
<head>
    <title>Test</title>
  <script src="js/jquery.js" type="text/javascript"></script>
  <script type="text/javascript">
jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
   // Your code here
   $(".centerDiv").center();
 });
</script>
    <style type="text/css">
 body {margin:0px;}
 .centerDiv{height:450px;width:650px;background-color:#0099CC}
    </style>
  
</head>

<body>
<div class="centerDiv"></div>
</body>

</html>
Member Avatar for Member #120589

You may consider the jquery ui framework. It has a few themes - you can create your own. The widgets are really good. I've only just started using it myself and am amazed at the results. Worth a look I think.

Member Avatar for macneato

Ok not a problem, lets bind the center function to window resize (GOT TO LOVE JQUERY).

Lets give this a try:

$(document).ready(function(){
    // Your code here
    $(".centerDiv").center();
});

//If the User resizes the window, we will recenterdiv
$(window).bind("resize", recenterdiv);
function recenterdiv(e){
	$(".centerDiv").center();
}
commented: Solved my issue! +2
Member Avatar for MJ Pieterse

i can't view the sample link, but i would suggest that you put the style coding on your container tag for the div to align it in the center. Don't use absolute as it will not work for the layout you are looking for.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.