#container
{
height: 200px;
position: relative;
}
#content
{
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform:translate(-50%,-50%);
position: absolute;
}
It helps to align content at middle of a container, for this, it is necessary to set a height for the container and relative position.
If you desire to align at very middle of a container, set left and top to 50%, if you want to align just middle but not center omite left.
Play with the transform: translate(-50%, -50%), if you omit left, you will need to change the first parameter to 0, depending in your necessity it will be the value.
If you desire to align at very middle of a container, set left and top to 50%, if you want to align just middle but not center omite left.
Play with the transform: translate(-50%, -50%), if you omit left, you will need to change the first parameter to 0, depending in your necessity it will be the value.
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.