Step by Step how to position an HTML tag control EXACTLY in the MIDDLE of its container

        By Carmel Shvartzman

In this tutorial we'll learn how to position an HTML tag control EXACTLY in the MIDDLE of its container.
Let's say we have a web page with a button <a> in it, and we want to position it horizontaly EXACTLY in the middle of the web page.
We'll customize the HTML button so that it's located in the MIDDLE of the web page , when at the beginings the button will be showing as follows:

If you want to create a web site like the one in the snapshot, which is using JQuery UI Widgets, like Accordion, Tabs, Portlets, Dialogs, and so on, you'll need to import a JQuery UI Theme, the jquery-ui.js and jquery-ui.css files. (and of course you'll need also a reference to the basic jquery.js file).
You can learn about importing the JQuery UI to your application  in a former tutorial where i explained the task in a complete step by step way.

Let's say the HTML of the button is this:

And the style of the <a> button  is:

Now to position the control EXACTLY in the MIDDLE of the horizontal <DIV> container, add the following code to the CSS button style:

        position:fixed;
        left:50%;
        width:150px;
        margin-left:-75px;
      

We are saying this:
1) position your LEFT border in the MIDDLE (50%) of the container
2) now, MOVE to the left HALF of your WIDTH (in this case, 75px, because the width is 150px)

The CSS button style will be as follows:

This is the CSS for you to COPY-PASTE:

   #btnOpenDialog {
        position:fixed;
        left:50%;
        width:150px;
        margin-left:-75px;
        padding: 5px 5px;
        text-decoration: none;
        font: 900 12px georgia;
        color: #FFF;
    }

And finally the web page will appear with the control EXACTLY in the MIDDLE, as follows:

There is , however, an easy way to horizontally center an HTML element like a <div>, using just CSS3 style, but is not exactly centered in the middle as we learned at this tutorial. You can see it in The HTML5 Club.

That's all!! 

In this tutorial we've learn how to position an HTML tag control EXACTLY in the MIDDLE of its container.  

Happy programming.....

כתב: כרמל שוורצמן