skip to Main Content

For some reason, my website isn’t centering an input box. Code:

@import url("https://fonts.googleapis.com/css?family=Ubuntu");

body { background-color: black; }

#textInput {
    position: absolute;
    top: 50%;
    right: 50%;
    width: 300px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    
    <title>Digturd.io</title>
</head>
<body>
    <input id="textInput" type="text">
</body>
</html>

The textbox I created is, for some reason, not centered into body. Is there any reason why?
Codepen: https://codepen.io/ARandomUncreativeName123/pen/oNqqeoY

5

Answers


  1. @import url("https://fonts.googleapis.com/css?family=Ubuntu");
    
    body { background-color: black; }
    
    #textInput {
        position: absolute;
        top: 50%;
        left: 50%;
      width: 300px;
      transform: translate(-50%,-50%)
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link rel="stylesheet" href="style.css">
        
        <title>Digturd.io</title>
    </head>
    <body>
        <input id="textInput" type="text">
    </body>
    </html>

    Just replace right: 50% to left: 50% and add transform.

    #textInput {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 300px;
        transform: translate(-50%,-50%)
    }
    
    Login or Signup to reply.
  2. You can use this technique if it fits.

    @import url("https://fonts.googleapis.com/css?family=Ubuntu");
    
    body { background-color: black; }
    
    .center{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #textInput {
        position: absolute;
      width: 300px;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link rel="stylesheet" href="style.css">
        
        <title>Digturd.io</title>
    </head>
    <body>
      <div class="center">
        <input id="textInput" type="text">
      </div>
    </body>
    </html>
    Login or Signup to reply.
  3. Since you want to center this in the body use vh and vw it will calculate using the width of the viewport, also set the height and width of the html and body tag using viewport height and width.

    @import url("https://fonts.googleapis.com/css?family=Ubuntu");
    
    html, body { background-color: black; width:100vw; height:100vh; margin: 0; }
    
    #textInput {
        position: absolute;
        top: 50vh;
        right: calc(50vw - 150px);
        width: 300px;
    }
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link rel="stylesheet" href="style.css">
        
        <title>Digturd.io</title>
    </head>
    <body>
        <input id="textInput" type="text">
    </body>
    </html>
    Login or Signup to reply.
  4. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
        <link rel="stylesheet" href="style.css">
        
        <title>Digturd.io</title>
    </head>
    <body>
        <input id="textInput" type="text">
    </body>
    </html>
    
    @import url("https://fonts.googleapis.com/css?family=Ubuntu");
    
    body { 
    background-color: black;
    margin: 0px;
    padding: 0px;
    }
    
    #textInput {
        position: absolute;
        top: 50%;
        left: calc(50% - 150px);
        width: 300px;
    }
    
    Login or Signup to reply.
  5. The Simplest way to center something horizontally is using the text-align: center property to the parent element.

    <div class="textInputDiv">
       <input id="textInput" type="text">
    </div>
    

    And apply this css over it in which text-align: center property will ensure it’s child is in center horizontally. And position: absolute; top: 50%; will center your input box vertically.

    body { background-color: black; }
    
    .textInputDiv{
       text-align: center;
       height: 100vh;
       width: 100%;
       position: absolute;
       top: 50%;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search