我怎样才能横向居中3个div？

Question

So I have 3 cards that I am going to put my projects inside, and I need them to be perfectly centered horizontally. I have tried many things but none have worked so far.

Here is the code for the cards.

 .card { background: #fff; border-radius: 3px; display: inline-block; height: 300px; margin: 1rem; position: relative; width: 290px; overflow: hidden; opacity: 1; } .card .topImage { display: inline-flex; width: 100%; height: 220px; overflow: hidden; align-content: center; } .topImage { background-color: rgba(0, 0, 0, .3); } .card .topImage img { height: 220px; } .card .bottom { height: 80px; width: 100%; } .card .bottom p { text-align: left; height: 80px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; padding-left: 20px; display: flex; align-items: center; text-decoration: none; color: #444; font-size: 18px; font-family: Roboto, sans-serif; } .card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); cursor: pointer; } 

  <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 1</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 2</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 3</p> </div> </div> 

Answer 1

Just use flexbox. Make a container for the cards and put display: flex; on it and then justify-content: center to center them no matter the size of the new container div

  .card { background: #fff; border-radius: 3px; display: inline-block; height: 300px; margin: 1rem; position: relative; width: 290px; overflow: hidden; opacity: 1; } .card .topImage { display: inline-flex; width: 100%; height: 220px; overflow: hidden; align-content: center; } .topImage { background-color: rgba(0, 0, 0, .3); } .card .topImage img { height: 220px; } .card .bottom { height: 80px; width: 100%; } .card .bottom p { text-align: left; height: 80px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; padding-left: 20px; display: flex; align-items: center; text-decoration: none; color: #444; font-size: 18px; font-family: Roboto, sans-serif; } .card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); cursor: pointer; } .card-container { display: flex; justify-content: center; } 

 <div class="card-container"> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 1</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 2</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 3</p> </div> </div> </div> 

Answer 2

Using flexbox this is easy. On the element that contains your divs just add display: flex; and justify-content: center; :

 .card { background: #fff; border-radius: 3px; display: inline-block; height: 300px; margin: 1rem; position: relative; width: 290px; overflow: hidden; opacity: 1; } .card .topImage { display: inline-flex; width: 100%; height: 220px; overflow: hidden; align-content: center; } .topImage { background-color: rgba(0, 0, 0, .3); } .card .topImage img { height: 220px; } .card .bottom { height: 80px; width: 100%; } .card .bottom p { text-align: left; height: 80px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; padding-left: 20px; display: flex; align-items: center; text-decoration: none; color: #444; font-size: 18px; font-family: Roboto, sans-serif; } .card-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); cursor: pointer; } body { display: flex; justify-content: center; } 

 <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 1</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 2</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 3</p> </div> </div> 

Answer 3

Create a parent with text-align: center

 .card { background: #fff; border-radius: 3px; display: inline-block; height: 300px; margin: 1rem; position: relative; width: 290px; overflow: hidden; opacity: 1; } .card .topImage { display: inline-flex; width: 100%; height: 220px; overflow: hidden; align-content: center; } .topImage { background-color: rgba(0, 0, 0, .3); } .card .topImage img { height: 220px; } .card .bottom { height: 80px; width: 100%; } .card .bottom p { text-align: left; height: 80px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; padding-left: 20px; display: flex; align-items: center; text-decoration: none; color: #444; font-size: 18px; font-family: Roboto, sans-serif; } .card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); cursor: pointer; } .parent { text-align: center; } 

 <div class="parent"> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 1</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 2</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 3</p> </div> </div> </div> 

Answer 4

Use translateX and left rules to position them.

 .card { background: #fff; border-radius: 3px; display: inline-block; height: 300px; margin: 1rem; position: relative; width: 290px; overflow: hidden; opacity: 1; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .card .topImage { display: inline-flex; width: 100%; height: 220px; overflow: hidden; align-content: center; } .topImage { background-color: rgba(0, 0, 0, .3); } .card .topImage img { height: 220px; } .card .bottom { height: 80px; width: 100%; } .card .bottom p { text-align: left; height: 80px; width: 100%; box-sizing: border-box; margin: 0; padding: 0; padding-left: 20px; display: flex; align-items: center; text-decoration: none; color: #444; font-size: 18px; font-family: Roboto, sans-serif; } .card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); cursor: pointer; } 

  <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 1</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 2</p> </div> </div> <div class="card card-1"> <div class="topImage"> </div> <div class="bottom"> <p>Project 3</p> </div> </div>