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,530 points

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,820 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
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,480 points
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
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,820 points
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,820 points
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,820 points
+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,820 points
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,820 points
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,950 points
+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,820 points