0

I've looked for quite a while on google, but I can't seem to find a straight answer on how to center a button on the page in height, relative to the page's height. I can do this with width using the style "margin: 0 auto;" Is there a similar way to do this for height?

p.s. password's 1234

/* Login */
function enter() {
   var pass = prompt("Enter the Password");
{
if (pass == "1234") 
{
    alert("Correct");
  location.href="Page2.html"
}
    
else
{
    if (pass == null)
        {
            throw '';
        }
    else
    {
    alert("Incorrect");
    }
}}}
/* Body Styles */
body {
    background-color: #00C5CD;
}

/* Defining Fonts */
    @font-face {
    font-family: "CinnabarBrush";
    src: url("CinnabarBrush.ttf");
}


/* Button Styles */
button#enter {
    background-color: #FF4444;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: block;
    font-size: 16px;
    margin: 0 auto;
   display: block;
}


/* Header1 (title) Styles */
h1#title {
    font-size: 50pt;
    color: #fff;
    font-family: "CinnabarBrush";
  height: auto;
  text-align: center;
  text-shadow: 
    -5px -5px 0 #000,
    5px -5px 0 #000,
    -5px 5px 0 #000,
    5px 5px 0 #000;
<!DOCTYPE html>
<html>
<head>
    <title>Cinnabar Web</title>
     <link rel="stylesheet" href="CSS.css">
    <script src="JavaScript.js"></script>
</head>
<body>
    <h1 id="title">Cinnabar Web</h1>
      <button id="enter" onclick="enter()">Enter</button>
</body>
</html>
Ben Cameron
  • 51
  • 1
  • 9
  • center horizontally and vertically? – Carl Binalla May 23 '17 at 03:17
  • How is that JS related to what you're asking? (We don't need to know what the button does if you're just asking about styling/positioning it.) Anyway, do you want the element centered vertically within the browser window, or within the page? – nnnnnn May 23 '17 at 03:21
  • @nnnnnn I realise that now, I will remove javascript. Also, yes, within the browser window, not the page, my mistake – Ben Cameron May 23 '17 at 03:24
  • @Swellar yes, horizontally and vertically – Ben Cameron May 23 '17 at 03:27
  • I didn't mean just the tag: I don't think we need to see the JS code within the question body either. Anyway, have you seen [this question](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) or [this question](https://stackoverflow.com/questions/8811427/trying-to-center-div-horizontally-and-vertically-in-screen) or looked into the [FlexBox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) techniques? – nnnnnn May 23 '17 at 03:28
  • Exactly where would you want the `Enter` button to be positioned? If you center it vertically, wouldn't it cover the text? – Carl Binalla May 23 '17 at 03:30
  • @Swellar on the snippet, yes, but on a webpage, no, it wouldn't – Ben Cameron May 23 '17 at 03:33
  • Sadly this has been marked as duplicated, I was about to answer it. Anyway, it was marked for a reason. Go read the answers in the links – Carl Binalla May 23 '17 at 03:35
  • @Swellar thanks for your help, I've now fixed it using "position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto;" – Ben Cameron May 23 '17 at 05:28

0 Answers0