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
Just replace
right: 50%
toleft: 50%
and add transform.You can use this technique if it fits.
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 thehtml and body
tag using viewport height and width.The Simplest way to center something horizontally is using the
text-align: center
property to the parent element.And apply this css over it in which
text-align: center
property will ensure it’s child is in center horizontally. Andposition: absolute; top: 50%;
will center your input box vertically.