How to vertically align elements in a container with css

You can use CSS3 Transform to achieve vertical alignment of elements in the container.

(Recommended learning: css quick start)

Specific code implementation:

.verticalcenter{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

Use this technique to go from single line text to paragraph to boxes will be aligned vertically.

At present, browser support for Transform requires attention. Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9 all support this attribute.

The above is the detailed content of How to vertically align elements in a container with css. For more information, please follow other related articles on the PHP Chinese website!