How to align a div to the middle horizontally width of the page

0 votes

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Apr 23, 2020 in HTML by kartik
• 37,480 points
67 views

1 answer to this question.

0 votes

Hello Kartik,

position: absolute and then top:50% and left:50% places the top edge at the vertical center of the screen, and the left edge at the horizontal center, then by adding margin-top to the negative of the height of the div, i.e., -100 shifts it above by 100 and similarly for margin-left. This gets the div exactly in the center of the page.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>

Hope this work!!

thank You!!

answered Apr 23, 2020 by Niroj
• 82,540 points

Related Questions In HTML

0 votes
0 answers

How to do calculation in PHP using a csv file for retrieving data?

Morning, I have a csv file and i ...READ MORE

Feb 11, 2020 in HTML by anonymous
• 140 points
422 views
0 votes
1 answer

How to Identify Web Element( Button) when there are multiple buttons without any ID

Hi Gangadhar, Do you need the HTML code to ...READ MORE

answered Feb 10, 2020 in HTML by Roshni
• 10,400 points
325 views
0 votes
1 answer

I've a query for <form>tag

That might be because button inside form ...READ MORE

answered Nov 2, 2020 in HTML by sindhu
74 views
0 votes
1 answer

unable to load image file using <img> tag

This error means that file was not ...READ MORE

answered Oct 7, 2020 in HTML by Niroj
• 82,540 points
181 views
0 votes
1 answer

How do I install the babel-polyfill library?

Hello @kartik, If your package.json looks something like ...READ MORE

answered Jul 17, 2020 in Node-js by Niroj
• 82,540 points
112 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,540 points
241 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,540 points
1,055 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,540 points
224 views
0 votes
3 answers

HTML - Change\Update page contents without refreshing\reloading the page?

pushState() # The pushState() method let's you update the URL and create ...READ MORE

answered Dec 15, 2020 in HTML by Gitika
• 65,850 points
15,156 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,540 points
1,617 views