How to align divs to father div in the center? Html css-CodePudding

I want to align to center the div I treid a lot of ways according to posts that was here in stackoverflow and couldn't find a solution where is my problem? someone can help me please?

body {
  font-size: 14px;
}
            
.buttons {
   width: 50%;
   height: 70px;
   text-align: center;
   align-content: center;
   position: relative;
   display: block;
   vertical-align: middle;
   margin: 0 auto;
}

.button{
      
 }
            
.button a {  
    margin-left: 5px;
    margin-right: 5px;
    font-family: Assistant;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px; 
    text-align: center; 
    color: #FFFFFF;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    border: 1px solid #FFFFFF;
    border-radius: 35px; 
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    text-align: center;
}
            
.blue-rectangle {
   background: rgba(83, 121, 125, 1); text-align: center; margin-top: 20px; width: 50%;
}

    <body>
    <div class="blue-rectangle">
            <div class="buttons">
            <div class="button"><a href="https://s.click.aliexpress.com/e/_A5pnrS">קנה טרולי שחור</a></div>
            <div class="button"><a href="https://s.click.aliexpress.com/e/_AFCt5O">קנה מזוודה קשיחה</a></div>
            <div class="button"><a href="https://s.click.aliexpress.com/e/_A3bMkC">קנה טרולי מדוגם</a></div></div></div>
        
</body>

CodePudding user response：

Try opening it into a full-page

body {
                font-size: 14px;
            }
            
            .buttons {
                width: 50%;
        text-align: center;
        align-content: center;
        position: relative;
        display: block;
        vertical-align: middle;
        margin: 0 auto;
            }
      .button{
          height: 100%;
          width: 100%;
      }
            
            .button a {
       
        font-family: Assistant;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        text-align: center; 
        color: #FFFFFF;
        text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
        text-decoration: none;
        border: 1px solid #FFFFFF;
        border-radius: 35px; 
        padding: 10px;
        padding-right: 20px;
        padding-left: 20px;
        text-align: center;
            }
            
            .blue-rectangle {
                background: rgba(83, 121, 125, 1);
                height: 100vh;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }

    <body>
    <div class="blue-rectangle">
            <div class="buttons">
                <div class="button"><a href="https://s.click.aliexpress.com/e/_A5pnrS">קנה טרולי שחור</a></div>
                <div class="button"><a href="https://s.click.aliexpress.com/e/_AFCt5O">קנה מזוודה קשיחה</a></div>
                <div class="button"><a href="https://s.click.aliexpress.com/e/_A3bMkC">קנה טרולי מדוגם</a></div></div></div>
        
</body>

CodePudding user response：

Make the buttons class to display flex, aligned its children to center and justify every content inside the buttons class element to center. You can remove the div.button and use the button class directly with anchor element.

body {
  font-size: 14px;
}
            
.buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    text-align: center;
    margin: 0 auto;
}
            
.button {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
    font-family: Assistant;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 21px; 
    text-align: center; 
    color: #FFFFFF;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    text-decoration: none;
    border: 1px solid #FFFFFF;
    border-radius: 35px; 
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
}
            
.blue-rectangle {
   background: rgba(83, 121, 125, 1);
   margin-top: 20px;
}

<div class="blue-rectangle">
  <div class="buttons">
    <a href="https://s.click.aliexpress.com/e/_A5pnrS" class="button">קנה טרולי שחור</a>
    <a href="https://s.click.aliexpress.com/e/_AFCt5O" class="button">קנה מזוודה קשיחה</a>
    <a href="https://s.click.aliexpress.com/e/_A3bMkC" class="button">קנה טרולי מדוגם</a>\
  </div>
</div>