Center an object tag in a div

Question

How can I center object content within a div?

.parent{
background-color:yellow;
}

.ob{
margin: 0 auto;
}
</style>

<div class="parent">
<object width="400" height="400" class="ob" data="helloworld.swf">
</object>
</div>

Thanks in advance!

Answer 1

An object element has inline style by default, and margin: auto applies to block-level elements only.

Add this style:

.ob {
  display: block;
}

Fiddle

Answer 2

Or this since the object is an inline element.

.parent{
text-align: center;
}

If you want to get modern.

.parent{
    background-color:yellow;
    display: flex;
    justify-content:center
}