CSS - center element vertically
In this article, we would like to show you how to center element vertically using CSS.
Quick solution:
.container {
display: flex;
align-items: center;
}
1. Flex layout with center property value
This aproach uses properties that alows to center child elements.
Note: main advantages of this approach are:
- no additional properties are needed,
- it can be used to center text or inline element in easy way.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px; height: 100px;
display: flex; /* <------------ required */
align-items: center; /* <------ required */
}
.element {
border: 1px solid gray;
width: 55px;
height: 55px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
2. Automatic margin
This approach uses fact, the automatic margin on Y-axis centers element inside cointainer.
Note: main advantage of this approach is we don't need to set element size.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px;
height: 100px;
display: flex; /* <---------- required */
}
.element {
margin: auto 0; /* <---------- required */
border: 1px solid gray;
width: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
3. Absolute position with translation
This approach sets left corner position of internal element in the middle of container and shifts half of element size with relative negative translation.
Note: main advantage of this approach is that it's working when size of element is not set as fixed.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
position: relative; /* <------------- required */
border: 1px solid gray;
width: 100px; height: 100px;
}
.element {
position: absolute; /* <------------- required */
top: 50%; /* <-------------- required */
transform: translate(0, -50%); /* <-- required */
border: 1px solid gray;
width: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
4. Absolute position with automatic margin
This aproach is based on combination of three styles:
- stretch absolute element inside container,
- automatic margin to center element inside container,
- fixed width to limit maximal element stretching size.
Note: main disadvantage of this approach is the requirement to set fixed element size.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
position: relative; /* <---------- required */
border: 1px solid gray;
width: 100px; height: 100px;
}
.element {
margin: auto; /* <--- required */
position: absolute; /* <--- required */
top: 0; bottom: 0; /* <--- required */
border: 1px solid gray;
width: 60px; height: 60px; /* <--- required */
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>