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 in HTML by kartik
• 11,890 points
16 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 by Niroj
• 23,950 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 in HTML by anonymous
• 140 points
166 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 in HTML by Roshni
• 600 points
80 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 in PHP by Niroj
• 23,950 points
71 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 in Java-Script by Niroj
• 23,950 points
250 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 in PHP by Niroj
• 23,950 points
41 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27 in PHP by Niroj
• 23,950 points
44 views
0 votes
1 answer

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

Hii kartik, onclick handlers run on the client side, ...READ MORE

answered Apr 23 in HTML by Niroj
• 23,950 points
28 views
0 votes
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 in HTML by Niroj
• 23,950 points
403 views
0 votes
1 answer

How can I take the required info and send it to a div in the html page?

window.onload=function(){ var anima = document.getElementById("crypto"); var ret = document.getElementById("btn"); ret.addEventListener("click",function(){ var ...READ MORE

answered Sep 6, 2018 in Blockchain by digger
• 26,660 points
77 views