Perfect centering of elements using transform: translate style

Navigation
3

In another question I asked before, a user gave me an example of how I could perfectly leave a html button on the screen.

It was in this question: How to position a button anywhere on the screen in html

He simply did: 

#centralizar{
    position:absolute; 
    top:50%;
    left:50%;
    transform: translate(-50%, -50%)
}

But I tried to center three buttons below, starting from the same pattern, but it does not work ...

From what I saw in the doc, translate changes the position of an object on the screen from the multiplication of the object's position matrix by a vector. In that case, I need to have the position information in pixels to be able to do this calculation, and have an idea of what translate to apply, right? Or it has an easier way.

Here is my code: 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #centralizado1 {position:absolute; top=46%; left=50%; transform:translate(-46%, -50%)}
    #centralizado2 {position:absolute; top=50%; left=50%; transform:translate(-50%, -50%)}
    #centralizado3 {position:absolute; top=54%; left=50%; transform:translate(-54%, -50%)}  
</style> 

<body>

<div id="centralizado1">
       <button >A</button>
</div>

<div id="centralizado2">
     <button>B</button>
</div>

<div id="centralizado3">
       <button>C</button
</div>

</body>
</html>
    
asked by anonymous 12.04.2018 / 21:45

2 answers

6

Here are some corrections and simplifications in "order of appearance":

  • Removed syntax error from original question, had = left over declarations;
  • Added width, height, and removed the borders of body and html for the page to occupy the visible area;
  • Added relative to body to accommodate the base for absolute of children (in fact, this is important when it comes to div within div ;
  • Centralized only a div , already with the 3 buttons;
  • Closed the tag <head> ;
  • Simplified the div that contains the buttons; 

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body, html {
        padding:0;
        margin:0;
        width:100%;
        height:100%;
        position:relative;
      }
      #centralizado {
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
      }
  </style> 
  </head>
  <body>
    <div id="centralizado">
      <button>A</button>
      <button>B</button>
      <button>C</button>
    </div>
  </body>
</html>
    
12.04.2018 / 21:55
0

You can not use more than one id in an element, and by definition an ID should not be repeated in more than one element in every HTML document, it must be a unique identifier for that element.

In order to arrive at this result, you can use the classes ( class attribute), where it is allowed to use more than one class in an element and reuse the class in more than one element.

Following your example: 

.centralizado1 {
  position:absolute;
  top: 46%;
  left: 50%;
  transform: translate(-46%, -50%)
}
.centralizado2 {
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -30%)
}
.centralizado3 {
  position:absolute;
  top: 54%;
  left: 50%;
  transform: translate(-54%, -10%)
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class="centralizado1 centralizado2">
   <button>A</button>
  </div>
  <div class="centralizado2 centralizado3">
    <button>B</button>
  </div>
  <div class="centralizado3 centralizado2 centralizado1">
    <button>C</button>
  </div>
  <div class="centralizado3">
    <button>C</button>
  </div>
</body>
</html>
    
12.04.2018 / 22:02
Best way to relate two tables Make a DIV appear only at a certain time