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:
xxxxxxxxxx.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:
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.
xxxxxxxxxx<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>This approach uses style property that centers items inside element.
Note: this style is new soltion so be careful using it (we have 2020).
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>This approach works only with inline elements e.g. text, span, a, etc.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>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.
xxxxxxxxxx<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>
