How can I center divs vertically and horizontally in a container

Question

I have the following markup:

<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>

And the following css with it:

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

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

I want to center the inner 5 divs horizontally and vertically in the container wrapper container, how can I achieve this using css. Thanks ahead!

score 2 · Accepted Answer · answered Jul 14 '17 at 05:41

2

One way is to use CSS flexbox on the wrapper and align contents to center:

.wrapper {
  width : 800px;
  height : 100px;
  background : #393533;
  margin : auto;
  display: flex;
  justify-content: center;
}

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

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

answered Jul 14 '17 at 05:41

31piy

23,323
6
47
67

1

Don't you think you should mark this question as duplicate? – Abhishek Pandey Jul 14 '17 at 05:47
1

@AbhishekPandey - Already done. – 31piy Jul 14 '17 at 05:49
Sounds Good.... – Abhishek Pandey Jul 14 '17 at 05:51

score 0 · Answer 2 · edited Jul 14 '17 at 06:30

0

Please try below code. May be it can help you out

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

edited Jul 14 '17 at 06:30

Gopal Joshi

2,350
22
49

answered Jul 14 '17 at 05:39

Dee_wab

1,171
1
10
23

yasarui · Answer 3 · 2017-07-14T05:53:45.000

0

<!DOCTYPE html>
<html>
<head>
  <title> 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>

edited Jul 14 '17 at 05:53

answered Jul 14 '17 at 05:44

yasarui

6,209
8
41
75

`clearfix` is not there – prasanth Jul 14 '17 at 05:52
@prasad please find the updated solution – yasarui Jul 14 '17 at 05:54

How can I center divs vertically and horizontally in a container

3 Answers3