My button is perfectly centered in one of my bootstrap columns, but things start to get messy when the screen size shrinks and the button overlaps with another column containing text. Adjusting the margins only seems to make things weirder.
.center-btn-container {
position: relative;
}
.paragraph-btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 214px;
height: 40px;
border-radius: 5px;
letter-spacing: 2px;
color: white;
background-image: linear-gradient(to right, #F36819, #F7931D);
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6">
<span class="col-1-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus aenean. Purus viverra accumsan in nisl nisi scelerisque eu. Duis ut diam quam nulla porttitor. Suspendisse sed nisi lacus sed viverra.</span>
</div>
<div class="col-md-6 center-btn-container">
<button type="button" class="btn paragraph-btn">Button</button>
</div>
</div>