How to center align circles?

Question

I've got 4 circles, which have to be aligned to the center (vertically and horizontally). How can I ahieve this?

JSFiddle

Here's my template:

<ion-content has-header="false">
   <div class="dashboard-grey-menu">
     <div class="row no-padding">
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
       <div class="col"><div class="circle"></div></div>
     </div>
   </div>
 </ion-content>

CSS

.dashboard-grey-menu {
  height: 30vh;
  background-color: #959595;
}

.circle { 
  border-radius: 50%; 
  width: 10vw;
  height: 15vh;
  background-color: #B7B7B7;
}

vertical-align: middle and text-align: center properties won't work. Thank you in advance.

Answer 1

Using the flexbox display type, you can easily achieve this:

 .dashboard-grey-menu { height: 30vh; background-color: #959595; display: flex; align-items: center; } .row { display: flex; justify-content: space-around; width: 100%; } .circle { border-radius: 50%; width: 10vw; height: 15vh; background-color: #B7B7B7; display: flex; align-items: center; justify-content: space-around; } 

 <div class="dashboard-grey-menu"> <div class="row no-padding"> <div class="col"> <div class="circle">Foobar</div> </div> <div class="col"> <div class="circle">Foo</div> </div> <div class="col"> <div class="circle">Bar</div> </div> <div class="col"> <div class="circle">Baz</div> </div> </div> </div> 

First we set the .dashboard-grey-menu to display: flex; and tell it to align the items in the center (both vertically and horizontally) using justify-content . Then we set the display: flex; on the .row element, and tell it to equally divide the space between the circles.

Answer 2

Here is my method. It's close but not 100% centered on the X axis. Better might be to use flexbox as you're already using it anyhow through the ionic framework.

  .dashboard-grey-menu { height: 30vh; background-color: #959595; position: relative; } .circle { border-radius: 50%; width: 10vw; height: 15vh; background-color: #B7B7B7; margin-left: 6vw; position: absolute; top: 50%; transform: translateY(-50%); } 

 <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet"/> <div class="dashboard-grey-menu"> <div class="row no-padding"> <div class="col"><div class="circle"></div></div> <div class="col"><div class="circle"></div></div> <div class="col"><div class="circle"></div></div> <div class="col"><div class="circle"></div></div> </div> </div>