You've seen so many implementations, but is there a best way? Comment your way to stardom with your best implementation. And if you don't understand what I mean, then check out the other's and you'll gain some insight into the crazy world of web development. (It should be simple, right?)
Use whatever strategy you like - but posting an example in jsFiddle or Codepen would make you that much cooler.
this is an awesome way to get the conversation going. First there is this:
http://codepen.io/jrohatiner/live/EZVVwz CSS Layout
Also to consider is flexbox: (btw friends-no media queries on there for your devices, that's browser only!) http://codepen.io/jrohatiner/live/egppMx
Thanks Andrew! great fun.
.center { position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; }
<div class='center'></div>
I use only this two way to center any element both vertically and horizontally.
<div class="parent"> <div class="child"></div> </div>
2.Position
.parent{ position: relative; }
.child { position: absolute; left: 50%; margin-left: half of the total width of child; top: 50%; margin-top: half of the total height of child; }
<div class ='center-div'></div>
.center-div{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:500px;
height:500px;
margin:auto;
}
Flexbox!
html
<div class="container">
<div class="center">
<h1>ayyeeeeee</h1>
</div>
</div>
css
.container{
display: flex;
align-items: center;
justify-content: center;
}
.center{
padding: 10px 20px;
background: #353535;
text-align: center;
}
h1{
color: #fefefe;
}
Some simple CSS styling can take care of that, no need for JS or 50%'s. Height, Width and Border added just to show you the result easier...
<div style="height:150px; width:350px; border:1px solid #ccc; display:table-cell; text-align:center; vertical-align:middle;"> Perfectly Centered Content </div>
The way of the future:
.parent {
display: flex;
}
.child {
margin: auto;
}
# Choose device to emulate
App.setDevice Device.iPhoneGold
# Create a new text
myText = new Text
width: auto
text: 'Hello'
image: 'goo.gl/TY8mx3'
imagePosition: center
imageScale: 1
backgroundClip: text
fontSize: 120
fontWeight: 700
color: clear
**myText.center()**
https://magixjs.com/ (The second tutorial.)
What about this example for your query on how to horizontally and vertically center that div in javascript
Please have a look
A method (JSFiddle example)
CSS:
html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table }
#content { display: table-cell; text-align: center; vertical-align: middle; }
HTML:
<div id="content"> Content goes here </div>
I mainly use two methods for centering elements, one is the right way while the other one is a hack. Here are the two methods:
Sample markup:
<div class="wrap">
<div class="element"></div>
</div>
1. Using Flexbox
Here is how you can center elements using flexbox:
.wrap {
display: flex;
justify-content: center;
align-items: center;
}
It's just 3 lines of code and I don't think it can get any easier than this. codepen
2. Using Position
.wrap { /* nothing here */}
.element {
position: relative;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
width: 156px;
}
This is a "hacky" way, you'd always have to give some width to your child element and make some adjustments here and there... codepen
I have six methods for vertical centering using CSS, EQCSS, and JavaScript on CodePen here: http://codepen.io/tomhodgins/pen/rLEKom
/* using calc() with 50% minus half the element's defined width and height */
.calc div {
width: 12em;
height: 3.5em;
top: calc(50% - 3.5em/2);
left: calc(50% - 12em/2);
}
/* using a negative margin equal to half the element's defined width and height */
.margin div {
width: 12em;
height: 3.5em;
top: 50%;
left: 50%;
margin-top: -1.75em;
margin-left: -6em;
}
/* using translate() to shift by 50% of the element's defined width and height */
.translate div {
top: 50%;
left: 50%;
transform: translateX(-50%)
translateY(-50%);
}
/* using flexbox */
.flexbox {
display: flex;
flex-flow: row wrap;
}
.flexbox p {
position: absolute;
}
.flexbox div {
position: static;
margin: auto;
}
/* using EQCSS & scoped styles to center the element by its rendered width */
@element '.eqcss div' {
$this {
top: calc(50% - eval('offsetHeight/2')px);
left: calc(50% - eval('offsetWidth/2')px);
}
}
/* using JavaScript to center the element by its rendered width */
window.addEventListener('resize',center)
center()
function center() {
var tag = document.querySelectorAll('.js div')
for (var i=0; i<tag.length; i++) {
var div = tag[i]
div.style.top = 'calc(50% - '+(div.offsetHeight/2)+'px)'
div.style.left = 'calc(50% - '+(div.offsetWidth/2)+'px)'
}
}
And for horizontal centering? Nothing beats:
div {
text-align: center;
}
Frontend Engineer | Hashnode Alumnus
edoc
Is there any reason not to use Flexbox now?