What is the best way to position divs both vertically and horizontally at the center of a container

Question

What is the best way to position divs both vertically and horizontally at the center of a container

Here is the HTML markup I'm working with:

<div class="wrapper">
  <div class="block new-block"></div>
  <div class="block used-block"></div>
  <div class="block service-block"></div>
  <div class="block certified-block"></div>
  <div class="block offer-type-block"></div>
</div>

Accompanied by this CSS:

.wrapper {
  width : 800px;
  height : 100px;
  background : #393533;
  margin : auto;
}

.block {
  width : 19%;
  height : 80px;
  background : salmon;
  display : inline-block;
}

I am looking to horizontally and vertically center the 5 inner divs within the wrapper container using CSS. Any suggestions on how I can achieve this? Thank you in advance!

jquery html css

Answer 1

Answer №1

If you want to center the contents of a wrapper using CSS flexbox, you can do it like this:

.container {
  width: 600px;
  height: 200px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eaeaea;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 2

If you want to center the contents of a wrapper using CSS flexbox, you can do it like this:

.container {
  width: 600px;
  height: 200px;
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  width: 100px;
  height: 100px;
  background-color: #eaeaea;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer 3

Answer №2

<!DOCTYPE html>
<html>
<head>
 <title> Unique Sample Code </title>
 <style>
.wrapper {
    width: 800px;
    height: 120px;
    background: #393533;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.block {
  width : 19%;
  height : 80px;
  background : salmon;
  display : inline-block;
}
 </style>
</head>
<body>

<div class="wrapper">
  <div class="block new-block"></div>
  <div class="block used-block"></div>
  <div class="block service-block"></div>
  <div class="block certified-block"></div>
  <div class="block offer-type-block"></div>
</div>



   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>

   </script>
</body>
</html>

Answer 4

<!DOCTYPE html>
<html>
<head>
 <title> Unique Sample Code </title>
 <style>
.wrapper {
    width: 800px;
    height: 120px;
    background: #393533;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
}
.block {
  width : 19%;
  height : 80px;
  background : salmon;
  display : inline-block;
}
 </style>
</head>
<body>

<div class="wrapper">
  <div class="block new-block"></div>
  <div class="block used-block"></div>
  <div class="block service-block"></div>
  <div class="block certified-block"></div>
  <div class="block offer-type-block"></div>
</div>



   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script>

   </script>
</body>
</html>

Answer 5

Answer №3

Give this code a try, it might be able to assist you:

.container {
        width: 800px;
        height: 100px;
        background-color: #393533;
        margin: auto;
        position: relative;
      }

Answer 6

Give this code a try, it might be able to assist you:

.container {
        width: 800px;
        height: 100px;
        background-color: #393533;
        margin: auto;
        position: relative;
      }

What is the best way to position divs both vertically and horizontally at the center of a container

Answer №1

Answer №2

Answer №3

Similar questions

Include a personalized picture in Marker Cluster without replacing the existing markers

Is there a transparent space in a PNG image that covers the the anchors located beneath

carousel anomaly

Implementing a two column stacked layout with Susy, similar to the design of Twitter's interface

Pan motion gesture above HTML components

Include CakePHP named parameters in the URL when selecting from a list

Tips for inserting text onto an image using a hover effect

What could be the reason my black overlay doesn't show up when the button is clicked?

Automation of transmitting HTML data to a database

Steps to trigger the "Confirm form resubmission" prompt when a user attempts to refresh their browser

Removing the last 3 elements using jQuery

Using AJAX to Capture PHP Error Responses

Retaining specific items in a collapsed Bootstrap Navbar

Using JQuery to retrieve part of a className results in a null value being returned

Using jQuery to iterate through elements of a PHP array

I'm looking for a more efficient and graceful way to implement jquery .slideToggle on numerous hidden divs. Any suggestions?

problem arising from the box shadow and transparent areas of an image

Using jQuery or JavaScript to trigger a specific popup when clicking on an email link

Creating a sleek hover effect with a bottom border on your Bootstrap navbar

Is it feasible for a rollover to occur on a layered component?