Home PHP JavaScript CSS WordPress APIs .htaccess Other How-To Useful Scripts What I Recommend
Posted on by Aleksandar Gichevski ()
Sometimes we need to center some element from all sides on screen and create optin-box, show welcome text to new users or some other action. In this post I will present simple CSS code for placing div element centered on screen from all sides. Even if u resize the window the position on the div element will be centered. First what we need is HTML code with div element inside. We will call the element midBox and later apply CSS rules based on its ID.





This is our middle box.
On above HTML code we add below CSS code that will add CSS rules on our midBox element.

So what is the magic of this code? Pretty simple you make midBox element position absolute which means you can place it anywhere on the screen without any limitations. You add first midBox position to be top:50% which means 50% from screen to go down, and left:50% which means 50% from screen to go right. After this we reduce the margin of midBox element to half of its width and height and that’s it we got it centered from all sides on browser screen. Below is full code for our example.






This is our middle box.
Here is Preview on what our example should be also click below button to check demo.


Other Posts You Might Like

Get a fast, free website audit


Enter your URL below to get full in-depth SEO report and tips.

Useful Scripts

Most Popular Posts

Recent Posts

June 14th, 2014
Website Optimization Using Gzip Compression

June 10th, 2014
Google Search AutoComplete API

May 14th, 2014
What is a Tag Cloud and How to Calculate it by Formula

March 27th, 2014
Error writing file /tmp (errcode 28) Solved!

February 15th, 2014
Fixed CSS & HTML Navigation Bar

February 9th, 2014
Benchmark Your Server (CPU, File IO, MySQL) with SysBench

February 8th, 2014
JavaScript Array Basics

January 29th, 2014
JVZoo IPN API in PHP

January 25th, 2014
Payoneer Debit Card for Freelancers to receive money online

January 24th, 2014
How HTML Color Codes are generated?

Read Latest Posts directly on Facebook

Archive