CSS - center element horizontally and vertically
In this article, we're going to have a look at how to center element using only CSS.
Quick solution (requires to use only 2 style properties):
use
display: flexwithmargin: auto
Example:
.container {
border: 1px solid gray;
width: 100px; height: 100px;
display: flex; /* <--------- required */
}
.element {
margin: auto; /* <---------- required */
border: 1px solid gray;
width: 50px;
}
The below presented solutions were ordered by ~quality and ~usability of solutions.
The solutions can be divided to three groups:
- flex layout based,
- absolute position based,
- inline elements (e.g. inline blocks or text) centering and other tricks (e.g. table cells).
Look on below examples to see how it works:
1. Flex layout with automatic margin example
This approach uses fact, the automatic margin size centers elemnt inside flex cointainer.
Note: main advantage of this approach is we dont 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; /* <---------- required */
border: 1px solid gray;
width: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
2. Grid layout with automatic margin example
This approach uses style property that centers items inside element.
Note: this style is new soltion so be careful using it (we have 2020).
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px; height: 100px;
display: grid; /* <--------------- required */
place-items: center; /* <--------- required */
}
.element {
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 example
This approach sets left-top 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 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 */
left: 50%; top: 50%; /* <--------------- required */
border: 1px solid gray;
transform: translate(-50%, -50%); /* <-- required */
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
4. Absolute position with automatic margin example
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 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 */
left: 0; top: 0; right: 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>
5. Flex layout with center property value example 1
This aproach uses properties that alows to center child elements.
Note: main advantage of this approach is the child elements can be centered vertically different way.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px; height: 100px;
display: flex; /* <------------ required */
justify-content: center; /* <-- required */
}
.element {
align-self: center; /* <------- required */
border: 1px solid gray;
width: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
6. Flex layout with center property value example 2
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 */
justify-content: center; /* <-- required */
}
.element {
border: 1px solid gray;
width: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
7. Inline blocks with vertical aligning example
This approach uses fact, each inline element can be centered vertically to sibling element. When sibling elements have 100% height than middle element is vertically centered.
Note: main disadvantage of this approach is horizontal centering with text aligning that cause centering of element content - solution for this problem is reseting element style.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px; height: 100px;
text-align: center; /* <--------- required */
}
.container:before, .container:after {
height: 100%; /* <--------------- required */
vertical-align: middle; /* <----- required */
display: inline-block; /* <------ required */
content: ''; /* <---------------- required */
}
.element {
border: 1px solid gray;
width: 50px;
vertical-align: middle; /* <----- required */
text-align: left; /* <----------- required */ /* reset to default (left) */
display: inline-block; /* <------ required */
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
8. Inline element with line height equal to container height example
This approach works only with inline elements e.g. text, span, a, etc.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 200px; height: 100px;
text-align: center; /* <------- required */
}
.element {
border: 1px solid gray;
width: 50px;
text-align: left; /* <--------- required */ /* reset to default (left) */
line-height: 100px; /* <------- required */ /* container height */
display: inline; /* <---------- required */
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
9. Table cell with vertical align example
This approach is based on fact, each table cell content can be vertically centered.
Note: main disadvaintage of this approach is we use table cell element without table stucture.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
border: 1px solid gray;
width: 100px; height: 100px;
display: table-cell; /* <-------- required */
vertical-align: middle; /* <----- required */
text-align: center; /* <--------- required */
}
.element {
border: 1px solid gray;
width: 50px;
text-align: left; /* <----------- required */ /* reset to default (left) */
display: inline-block; /* <------ required */
}
</style>
</head>
<body>
<div class="container">
<div class="element">Some text here...</div>
</div>
</body>
</html>
10. 50% absolute position example
This approach sets left-top corner position of internal element in the middle of container and shifts half of element size with negative margins.
Note: main disadvantage of this approach is the margin and size of element should be set to fixed.
// ONLINE-RUNNER:browser;
<!doctype>
<html>
<head>
<style>
.container {
position: relative; /* <---------- required */
border: 1px solid gray;
width: 100px; height: 100px;
}
.element {
margin: -30px -30px; /* <--------- required */ /* -width/2 -height/2 */
position: absolute; /* <---------- required */
left: 50%; top: 50%; /* <--------- 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>