🤩 New Cool Developer Tools for you. Explore →
FREE JavaScript Video Series Start Learning →
FLAT 75% OFF All Interactive courses at flat ₹250 / $3.25 only. HURRRRRY!! Explore now
  Signup/Sign In
Tests
MCQs to test your knowledge.
Forum
Engage with the community.
Compilers
Compilers to execute code in browser.
← Back to Questions
Ask Question
Not satisfied by the Answer? Still looking for a better solution?
Ask Question

Flexbox: center horizontally and vertically

How to centre div horizontally, and vertically within the container using flexbox. In the below example, I want each number below each other (in rows), which are centred horizontally.

.flex-container {

  padding: 0;

  margin: 0;

  list-style: none;

  display: flex;

  align-items: center;

  justify-content: center;

}

row {

  width: 100%;

}

.flex-item {

  background: tomato;

  padding: 5px;

  width: 200px;

  height: 150px;

  margin: 10px;

  line-height: 150px;

  color: white;

  font-weight: bold;

  font-size: 3em;

  text-align: center;

}


<div class="flex-container">

  <div class="row">

    <span class="flex-item">1</span>

  </div>

  <div class="row">

    <span class="flex-item">2</span>

  </div>

  <div class="row">

    <span class="flex-item">3</span>

  </div>

  <div class="row">

    <span class="flex-item">4</span>

  </div>

</div>
flexbox css html
by

2 Answers

aashaykumar
I think you want something like the following.


html, body {

    height: 100%;

}

body {

    margin: 0;

}

.flex-container {

    height: 100%;

    padding: 0;

    margin: 0;

    display: -webkit-box;

    display: -moz-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    align-items: center;

    justify-content: center;

}

.row {

    width: auto;

    border: 1px solid blue;

}

.flex-item {

    background-color: tomato;

    padding: 5px;

    width: 20px;

    height: 20px;

    margin: 10px;

    line-height: 20px;

    color: white;

    font-weight: bold;

    font-size: 2em;

    text-align: center;

}





<div class="flex-container">

    <div class="row"> 

        <div class="flex-item">1</div>

        <div class="flex-item">2</div>

        <div class="flex-item">3</div>

        <div class="flex-item">4</div>

    </div>

</div>
pankajshivnani123
You can make use of


display: flex;

align-items: center;

justify-content: center;

on your parent component

Login / Signup to Answer the Question.

LoginSignup