Advertisement
Guest User

Untitled

a guest
Jun 15th, 2019
84
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.35 KB | None | 0 0
  1. <style type="text/css">
  2. body {
  3. margin: 0;
  4. padding: 0;
  5. text-align: center;
  6. }
  7. .bodyclass #container {
  8. width: ???px; /*SET your width here*/
  9. margin: 0 auto;
  10. text-align: left;
  11. }
  12. </style>
  13. <body class="bodyclass ">
  14. <div id="container">type your content here</div>
  15. </body>
  16.  
  17. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
  18. <html>
  19. <head>
  20. <title>Universal vertical center with CSS</title>
  21. <style>
  22. .greenBorder {border: 1px solid green;} /* just borders to see it */
  23. </style>
  24. </head>
  25.  
  26. <body>
  27. <div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
  28. <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
  29. <div class="greenBorder" style=" #position: relative; #top: -50%">
  30. any text<br>
  31. any height<br>
  32. any content, for example generated from DB<br>
  33. everything is vertically centered
  34. </div>
  35. </div>
  36. </div>
  37. </body>
  38. </html>
  39.  
  40. <div class="parent">
  41. <span>center content using transform</span>
  42. </div>
  43.  
  44. //CSS
  45. .parent {
  46. position: relative;
  47. height: 200px;
  48. border: 1px solid;
  49. }
  50. .parent span {
  51. position: absolute;
  52. top: 50%;
  53. left: 50%;
  54. -webkit-transform: translate(-50%, -50%);
  55. transform: translate(-50%, -50%);
  56. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement