# How do I center a \<div\> vertically?

**URL:** https://forum.kirupa.com/t/how-do-i-center-a-div-vertically/325508
**Category:** web dev
**Created:** [October 19, 2011, 5:10pm UTC](https://forum.kirupa.com/t/how-do-i-center-a-div-vertically/325508 "2011-10-19T17:10:16Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![complete](https://avatars.discourse-cdn.com/v4/letter/c/22d042/32.png) [@complete](https://forum.kirupa.com/u/complete)
#### Post date: [October 19, 2011, 5:10pm UTC](https://forum.kirupa.com/t/how-do-i-center-a-div-vertically/325508/1 "2011-10-19T17:10:16Z")

</div>

How do I center a \<div\> vertically?  
I have managed to horizontally align a Div object. Here is how I did it. I got the width and the height of the object I wanted to center (XAML CODE)

```auto
<Grid Background="White" Height="300" Width="738" VerticalAlignment="Center" HorizontalAlignment="Center">

```

Then, in the html file that hosts the silverlight control I did this:

```auto
 <div id="silverlightControlHost" style="width:738px; height: 300px; margin-top:auto; margin-bottom:auto; margin-left: auto; text-align:center; margin-right: auto;">

```

That puts the control centered horizontally at the top of the web page.  
Now, how do I center it vertically?