Best IT Recipes

How to center an html element in a browser window?

How to place some html element, for example div, in the middle of the browser window (and not the page, not the screen)? It does not depend on the size of the browser window, screen resolution, location of the toolbar, etc. I want it to be in the middle of the browser window.

thank

+48
html center
Jun 11 '09 at 16:09
source share
17 answers

I was surprised that no one said the situation = fixed. It does exactly what I requested, and works in all human browsers and IE since 7.

+10
Jun 13 '09 at 15:19
source share

To do this, you need to know the size of the element you are centering. Any measurements will be performed (i.e. Px, em, percent), but it should have a fixed size.

css will look like this:

// Replace X and Y with a number and u with a unit. do calculations // and remove parens .centered_div { width: Xu; height: Yu; position: absolute; top: 50%; left: 50%; margin-left: -(X/2)u; margin-top: -(Y/2)u; }

Change This is centered in the viewport. You can only focus in the browser window using JavaScript. But in any case, it can be good enough, since you probably want to display a popup / modal field?

+35
Jun 11 '09 at 16:15
source share

This is only possible with CSS - JavaScript is not needed: Here is an example

Here is the source code for this example:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=ISO-8859-1"> <title>Dead Centre</title> <style type="text/css" media="screen"><!-- body { color: white; background-color: #003; margin: 0px } #horizon { color: white; background-color: transparent; text-align: center; position: absolute; top: 50%; left: 0px; width: 100%; height: 1px; overflow: visible; visibility: visible; display: block } #content { font-family: Verdana, Geneva, Arial, sans-serif; background-color: transparent; margin-left: -125px; position: absolute; top: -35px; left: 50%; width: 250px; height: 70px; visibility: visible } .bodytext { font-size: 14px } .headline { font-weight: bold; font-size: 24px } #footer { font-size: 11px; font-family: Verdana, Geneva, Arial, sans-serif; text-align: center; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 20px; visibility: visible; display: block } a:link, a:visited { color: #06f; text-decoration: none } a:hover { color: red; text-decoration: none } --></style> </head> <body> <div id="horizon"> <div id="content"> <div class="bodytext"> This text is<br> <span class="headline">DEAD CENTRE</span><br> and stays there!</div> </div> </div> <div id="footer"> <a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div> </body> </html>
+11
Jun 11 '09 at 16:24
source share

Here:

  • HTML + CSS Only Solution - No JavaScript Required
  • No need to know content size in advance
  • Content Consoles Focus on Resizing a Window

And an example:

 <!DOCTYPE html> <html> <head> <title>HTML centering</title> <style type="text/css"> <!-- html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; } #td_wrap { vertical-align: middle; text-align: center; } --> </style> </head> <body> <table id="tbl_wrap"><tbody><tr><td id="td_wrap"> <!-- START: Anything between these wrapper comment lines will be centered --> <div style="border: 1px solid black; display: inline-block;"> This content will be centered. </div> <!-- END: Anything between these wrapper comment lines will be centered --> </td></tr></tbody></table> </body> </html>

Take a look at the source URL for full details: http://krustev.net/html_center_content.html

You can do whatever you want with this code. The only condition is that any derivative work must have a link to the original author.

+10
May 10 '12 at 16:31
source share
 div#wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
+7
Jun 24. '15 at 14:34
source share

If you don't know the size of the browser, you can simply center in CSS with the following code:

HTML code:

 <div class="firstDiv">Some Text</div>

CSS code:

  .firstDiv { width: 500px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #F1F1F1; }

It also helps in any unforeseen changes in the future.

+4
Apr 14 '15 at 14:46
source share

I had a lot of problems with centering and alignment until I found Flexbox as a recommendation in the manual.

Complete Flexbox Guide

I posted a snippet (which works with Chrome) here for convenience:

 <head> <style type="text/css"> html { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; } </style> </head> <body> This is text! </body>

See the article for more details.

+3
Sep 08 '13 at 17:41
source share

To center the alignment of the div you have to apply a style

 div { margin: 0 auto; }
+2
Jun 11 '09 at 16:20
source share
 <div align="center">

or

 <div style="margin: 0 auto;">
+1
Jun 11 '09 at 16:16
source share

This is tested and works in all browsers.

 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { margin: 0; padding: 0; height: 100%; } #outer {height: 100%; overflow: hidden; position: relative; width: 100%;} #outer[id] {display: table; position: static;} #middle {position: absolute; top: 50%; width: 100%; text-align: center;} #middle[id] {display: table-cell; vertical-align: middle; position: static;} #inner {position: relative; top: -50%; text-align: left;} #inner {margin-left: auto; margin-right: auto;} #inner {width: 300px; } /* this width should be the width of the box you want centered */ </style> </head> <body> <div id="outer"> <div id="middle"> <div id="inner"> centered </div> </div> </div> </body> </html>
+1
Jun 11 '09 at 16:31
source share

This is a great responsive approach to absolute centering.

Browser Compatibility: Chrome, Firefox, Safari, Mobile Safari, IE8-10.

Benefits:

  • Cross browser (including IE8-10)
  • No special markup, minimal styles
  • Responsive with percentages and min- / max -
  • Use one class to center any content.
  • It is centered regardless of filling (without choosing a window size!)
  • Blocks can be easily changed
  • Works great on images

Warning:

  • Height must be declared (see Variable Height)
  • Recommended overflow settings: automatically to prevent overflow of content (see Overflow)
  • Not working on windows phone
+1
06 Oct '13 at
source share

I do not think you can do this. You may be in the middle of the document, but you don’t know the layout of the toolbar or the size of the browser controls. This way you can focus on the document, but not in the middle of the browser window.

0
Jun 11 '09 at 16:14
source share

If I understand you correctly, you want to center the element vertically and horizontally based on the window, not the document. This may be a little painful, but you can use javascript to determine the window size, scroll position, element size, etc., and then place the element in the center of the window (not the document, but the viewport).

If you want this element to remain in the window schedule when scrolling, you would need to fix the scroll event and adjust the position.

The code for this differs from one browser to another.

0
Jun 11 '09 at 16:19
source share

You can write JavaScript to find the height and width of the window and make it half to find the center point.

Add the material inside the tag and set the top of the div and to the left of javascript to the center coordinates that you found using Javascript.

Let me know if you need a code.

0
Jun 11 '09 at 16:25
source share

Hope this helps. Trick - Use absolute positioning and adjust the top and left columns. Of course, the "dead center" will depend on the size of the object / div you are embedding, so you will need to do some work. For the login window, I used the following: it also has some security with maximum width and maximum height, which can be really useful for you in your example. Adjust the values ​​below for your requirements.

 div#wrapper { border: 0; width: 65%; text-align: left; position: absolute; top: 20%; left: 18%; height: 50%; min-width: 600px; max-width: 800px; }
0
Jun 11 '09 at 16:37
source share

you can center any object in the viewport, here is an example using jquery

 $(document).ready(function() { posicionar("#midiv"); $(window).on("resize", function() { posicionar("#midiv"); }); function posicionar(elemento){ var altoDocumento = $(window).height();//alto var anchoDocumento = $(window).width(); //console.log(altoDocumento); //console.log(anchoDocumento); var centroXDocumento = anchoDocumento / 2; var centroYDocumento = altoDocumento / 2; //console.log(centroXDocumemnto,centroYDocumento); var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento var anchoElemento = $(elemento).outerWidth(true);//alto var centroXElemento = anchoElemento / 2;// centro x del elemento var centroYElemento = altoElemento / 2; // centro y del elemento var posicionXElemento = centroXDocumento - centroXElemento; var posicionYElemento = centroYDocumento - centroYElemento; $(elemento).css("position","absolute"); $(elemento).css("top", posicionYElemento); $(elemento).css("left", posicionXElemento); } });

html

 <div id="midiv"></div>

Note: you must execute the onDomReady function when resizing the window.

here is jsfiddle http://jsfiddle.net/geomorillo/v82x6/

0
Dec 27 '13 at 21:58
source share

Working solution.

 <html> <head> <style type="text/css"> html { width: 100%; height: 100%; } body { display: flex; justify-content: center; align-items: center; } </style> </head> <body> Center aligned text.(horizontal and vertical side) </body> </html>
0
Oct 22 '14 at 12:13
source share


More articles:


All Articles