Because <table align, and <td valign doesn’t work on code pen, I’m trying to find a different way to center html in the middle, using only html.
Doesn’t work on jsfiddle either:
<table align='center' height='100%'>
<tr>
<td valign='middle'>
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</td>
</tr>
</table>
“Center … using only HTML”.
HTML is for giving meaning to content. Layout/styling is the job of CSS. So to center a table, set it to margin: 0 auto; in your style sheet.
Then, how come,
<table align='center' height='100%'>
<tr>
<td valign='middle'>
Works fine on here to center in the middle?
http://htmltestfgf6546.blogspot.com/
Because align='center' comes from the early days of HTML before CSS was invented. It was realized 20 years ago that this was a really bad idea, so those HTML attributes were deprecated in the early days of the web. It’s just that there’s an ethos that most HTML and CSS remains backwards compatible, which means browsers still support it.
It would be the equivalent of major freeways providing watering toughs for horses, just in case anyone still wants to travel by horse and cart. It’s really that out of date. 
The table attributes, align and valign, were deprecated years ago. It looks like CodePen and jsfiddle have stopped supporting them whereas blogspot still supports them.
oh, ok. so, table margin 0 would look like?
table {
margin: 0;
}
No, that won’t work. It needs to be something like this:
table {
margin: 0 auto;
}
That’s shorthand for
margin: 0 auto 0 auto;
The auto is for the left and right margins, which cause a block-level element to sit in the middle of its container.
I have to disagree with the gurus.
If you are happy with your code, then use it.
In the scheme of things, it makes no difference how you code.
Your code is personal to you and does not have to be bound by rules.
Rules are for the guidance of wise men and the obedience of fools.
So be a free spirit and do what suits your temperament.
Life is to short to worry about inconsequential coding. 
coothead
ok, now how do I put it in the middle of the page? away from the top?
How do you have top and bottom to have 0 margins also?
Ah, when you talk about “centering”, people tend to assume you’re talking about left/right (“horizontal”) centering. Vertical (up/down) centering is a bugger with HTML/CSS, and is kind of a holy grail. One modern method is to use display: flex, though it’s not fully supported yet. You can apply it to the body element, but I’m a little wary of that, so I prefer to use a container.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.wrap {display:flex; min-height: 100vh; align-items: center; justify-content:center;}
</style>
</head>
<body>
<div class="wrap">
<table>
<tr>
<td>
Content
</td>
</tr>
</table>
</div>
</body>
</html>
I’ve left out “vendor prefixes” there to keep it simple, but some browsers will need them for this code to work.
flex doesn’t work in internet explorer.
I tried doing this But how do you prevent the Content from moving up and down when you open and close the side panel? https://jsfiddle.net/ahx3v3hp/4/
How do you keep it in the middle without it moving?
Nothing works in Internet Explorer. 
I would prefer to use display: table, which is better supported, but I can never remember how to use it properly. 
the thing is, I’m trying to get it to work on all browsers.
The code that I posted in response to one of your questions in a previous topic (your first topic, I think) did exactly that.
meaning, it didn’t work in ie either. I know flex doesn’t work in ie, I’m trying to figure something else that will.
Yes, it did.
this isn’t supported in jsfiddle or code pen.
<table align='center' height='100%'>
<tr>
<td valign='middle'>