CODEWITHSUNDEEP
htmlcss
user82302124
user82302124

Reputation: 1143

Centering percentage based div

I've looked at this question: Centering a percent-based div

But my attempts are fruitless. I dont quite understand how the answer in that question makes sense or how to do it with 100% widths. Basically I have a dynamic rendered page that has two divs - both are set to 100% width and 100% height so that the entire output is captured. So if the two divs are different lenghts, I want to center the div to the body:

<body>
  <div id="first">Longer Name</div>
  <div id="second">Name</div>
</body>

Current output:

OUTPUT LONGER
OUTPUT SHORT

Desired output:

OUTPUT LONGER
    OUTPUT SHORT

div CSS:

height: 100%;
position: relative;
width: 100%;

body CSS:

margin: 0;
padding: 0;

Percentage based divs are required due to the dynamic nature of the output.

EDIT

I should make it clear the output is a ton of tables. The example I put was to show how I want it to center. The output is NOT text. Basically one table width could be 120px and I need to center it in the body (which would be the width of the longer div, which could be 1500px).

Upvotes: 0

Views: 116

Answers (3)

prieston
prieston

Reputation: 1506

You can use this kind of css: 

#mydiv{
position:fixed;
padding:0px;

z-index: 101;
top:50%;
left:50%;
transform: translate(-50%, -50%); /*what you actually need to center*/

width: 80%;
height: 80%;
background:rgba(0,0,0,1);
display: none;
border:1px solid #d2d2d2;
}

Upvotes: 0

Saeed
Saeed

Reputation: 3785

When you use width by %,your site is flexible and when you want all div in center u use this code,this code useful for any element content will be center in any your site place

#first, #second{    
  width:100%;
  text-align:center;
 }

best regards

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16685

#first, #second { text-align: center; }

Upvotes: 2

Related Questions