input box not centering

Question

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

score 1 · Accepted Answer · answered Aug 04 '22 at 04:21

@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%)
}

score 0 · Answer 2 · answered Aug 04 '22 at 04:23

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>

score 0 · Answer 3 · answered Aug 04 '22 at 04:23

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>

score 0 · Answer 4 · answered Aug 04 '22 at 04:28

<!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;
}

score 0 · Answer 5 · answered Aug 04 '22 at 04:47

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%;
}

input box not centering

5 Answers5