Alignment of buttons with css

To align in the center you will have to use a parent element. Put the buttons inside a div .

div {
    width: 1000px;
    margin: 0 auto;
}

The width can be any size, but is required.

Now to have line break it will be necessary to reduce the width of the parent element with the help of @media-queries , causing the buttons to adjust vertically.

@media only screen and (max-width: 330px) {
    div {
        width: 250px;
    }
}

About the example above. When the browser is less than 331px, the parent element will be shortened, causing the buttons to generate line breaks.

Because your buttons are with display: block-inline , their behavior will be similar to a inline element, and will be subject to text alignment. Then you can add the following rule in the body element to center your buttons:

body {
   text-align: center
}

In this case, text-align will affect all elements inline within body . If you want to restrict this to buttons, putting them inside a div should solve your problem:

.bt-container { 
   text-align: center 
 }
.text-white,
.text-white-houve:hover,
.bt {
  color: #FFFFFF !important;
}
.shadow-1,
.bt,
.container {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}
.shadow-2,
.bt:hover,
.context_menu_pai,
.box_login,
.datepicker.dropdown-menu,
.dialogbox,
.overflow-menu ul {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.transition-1,
.bt {
  transition: all .3s ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}
.bt {
  border: 0;
  padding: 10px;
  width: 200px;
  height: 50px;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  border-radius: 4px;
}

<div class="bt-container">
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
    <button class='bt' type='submit'>OK</button>
</div>