Centering a div

Discussion in 'CSS' started by LS5000, May 22, 2016.

0
  1. #1
    I need to center a div "Center this div" inside the midContent div. I tried left: 50%; transform: translateX(-50%); but it pushes it too much to the right.
    
<!DOCTYPE html>
<html lang="en">

   <head>
   </head>
   
   <body id="body" style="background-color: #f1f1f1;">
   
     <div id="left" style="position: fixed; left: 0; top: 0; width: 400px; height: 100%; background-color: #FFF; z-index: 10;">
     </div>
     
     <div id="midContent" style="position: relative; margin-left: 400px; background-color: transparent; max-width: 100%; min-height: 600px; max-height: 1200px;">
       <div style="margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: transparent; width: 80%; height: 100%;">
         <div>Center this div</div>
       </div>
     </div>
   </body>
</html>
    Code (markup):

     
    LS5000, May 22, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    A div is by default a block level element, so centering it horizontally is done with margin: 0 auto;
     
    PoPSiCLe, May 22, 2016 IP
  3. LS5000

    LS5000 Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    Well, it doesn't work.
     
    LS5000, May 22, 2016 IP
  4. karjen

    karjen Active Member

    Messages:
    54
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    73
    #4
    Is this what you mean?
    <!DOCTYPE html>
<html lang="en">

   <head>
   </head>
  
   <body id="body" style="background-color: #f1f1f1;">

  
     <div id="left" style="position: fixed; left: 0; top: 0; width: 400px; height: 100%; background-color: #FFF; z-index: 10;">
     </div>
    
     <div id="midContent" style="position: relative; margin-left: 400px; background-color: transparent; max-width: 100%; min-height: 600px; max-height: 1200px;">
       <div style="margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-color: transparent; width: 80%; height: 100%;">
         <div style="width: 100px;margin: auto;">Center this div</div>
       </div>
     </div>
   </body>
</html>
    Code (markup):
     
    karjen, May 22, 2016 IP
  5. LS5000

    LS5000 Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    Yes. Thank you!
     
    LS5000, May 22, 2016 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    Why the *** do you have a ID on body?

    That said, do the world and yourself a favor, and get that damned style the blazes out of your markup! 99.99% of the time you use style="" you're doing something wrong. 100% of the time you use <style> you ARE doing something wrong.

    EVEN in the development stage.

    Though fixed positioning and pixel widths don't bode well either from an accessibility standpoint either.
     
    deathshadow, May 24, 2016 IP
  7. LS5000

    LS5000 Greenhorn

    Messages:
    24
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    I have ID on body because I use some JS to fade it in and out. Somehow I can't get it to work with document.getElementsByTagName

    Yes, it's a good idea to get rid of all the styling in markup. Fixed that. And I used % instead of px, now everything works great.
    Thanks, deathshadow.
     
    LS5000, May 24, 2016 IP
  8. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #8
    That's because body is it's own entity, just use document.body

    NOT that I'd use scripttardery to fade in and out body, since that reeks of some sort of "how badly does this fall apart scripting off" rubbish.

    JS for nothing and your scripts for free; that ain't workin', that's not how you do it.
     
    deathshadow, May 24, 2016 IP