# CSS - Center Child Elements Vertically
[SOURCE](https://stackoverflow.com/a/6490283/1602807)
You can use [Flex Layout](https://github.com/angular/flex-layout/wiki/Declarative-API-Overview) ([example](https://tburleson-layouts-demos.firebaseapp.com/#/docs)), so something like:
```html
<div fxLayout="row" fxLayoutAlign="center center" >
```
Or use these two:
### Modern solution (transform)
Since transforms are fairly well supported now there is an easier way to do it.
```html
<div class="cn">
<div class="inner">your content</div>
</div>
```
```css
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
```
### Modern solution (flexbox)
```css
.cn {
display: flex;
justify-content: center;
align-items: center;
}
```