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,500 points
200 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,740 points

Related Questions In HTML

0 votes
0 answers

How to GET background color of a particular portion on the html page

I used Gradient to set the color ...READ MORE

Jul 26 in HTML by Ashwini
• 1,160 points
5 views
0 votes
0 answers

How to replace innerHTML of a div using jQuery?

How could I replace the below code ...READ MORE

Jul 4 in HTML by Tejashwini
• 1,660 points
24 views
0 votes
0 answers

how to create a HTML5 video element without it being shown in the page?

how is it possible to dynamically create ...READ MORE

Jul 5 in HTML by Tejashwini
• 1,660 points
10 views
0 votes
0 answers

How to use HTML to print header and footer on every printed page of a document?

Can HTML pages be printed with unique ...READ MORE

Jul 12 in HTML by Ashwini
• 1,160 points
11 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,740 points
750 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,740 points
1,245 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,740 points
5,979 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,740 points
1,484 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,870 points
45,556 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,740 points
3,058 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP