input box not centering-CodePudding

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:

CodePudding user response：

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

CodePudding user response：

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 >
    <input id="textInput" type="text">
  </div>
</body>
</html>

CodePudding user response：

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>

CodePudding user response：

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

CodePudding user response：

The Simplest way to center something horizontally is using the text-align: center property to the parent element.

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