Bootstrap-在容器流体内垂直和水平居中放置内容

Question

Just like the title says, in Bootstrap 4, I can't figure out how to center content inside a column that's inside .container-fluid.

Here's my code, can someone please let me know what I did wrong?

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-4 my-auto mx-auto"> <div class="mx-auto"> <h1 class="mb-5">This is a title </h1> <p class="mb-5">Lorem ipsum</p> <a href="#">Click me</a> </div> </div> <div class="col-md-8"> <p>Something else that's not important but needs to be here </p> </div> </div> 

Why doesn't the .mx-auto work and what can I use instead of it?

Answer 1

The col-* are flex items, so you have to also make them flex container in order to center their content like you want (vertically or/and horizontally) using margin:auto with elements ( my-auto / mx-auto ) or align-items-* / jusity-content-* with the container:

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-4 d-flex flex-column align-items-center justify-content-center"> <h1 class="mb-5">This is a title </h1> <p class="mb-5">Lorem ipsum</p> <a href="#">Click me</a> </div> <div class="col-md-8 d-flex flex-column "> <p class="my-auto mx-auto">Something else that's not important but needs to be here </p> </div> </div>