User-friendly code tutorials
When the element to be centered is an inline element we use text-align center on its parent.
When the element is a block level element we give it a width and set the left and right margins to a value of auto.
The values for vertical-align have meaning with respect to a parent inline element.
img {
text-align: center;
}
That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element.
Put text-align: center on a containing block and as long as the image is still inline, it will be centered.
If the image itself is set to block then it must have left and right margins set to auto.
It used to be an annoying problem.