Align the input element perfectly in both horizontal and vertical positions

I've been trying to center the <input> element within a black <div>, but my attempts have not been successful. Can you tell me what I'm doing incorrectly?

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  background-color: #fafafa;
  width: 100%;
  height: 10%;
}
main {
  background-color: #000;
  width: 100%;
  height: 50%;
}
main input {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 3em;
}
footer {
  background-color: #fafafa;
  width: 100%;
  height: 40%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

<body>
  <header></header>
  <main>
    <input type="text">
  </main>
  <footer></footer>
</body>

</html>

htmlcss

Answer №1

A simple technique involves setting the position of the container to relative and the position of the input to absolute. Then, adjust the top/right/bottom/left values of the input to zero, with margin set to auto. No need for CSS3 transforms:

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  background-color: #fafafa;
  width: 100%;
  height: 10%;
}
main {
  background-color: #000;
  width: 100%;
  height: 50%;
  position: relative;
}
main input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 60%;
  height: 3em;
  margin: auto;
}
footer {
  background-color: #fafafa;
  width: 100%;
  height: 40%;
}
<header></header>
<main>
  <input type="text">
</main>

<footer></footer>

Answer №2

To achieve proper centering, it is recommended to use position: relative instead of position: absolute. The latter centers based on the entire screen rather than the parent element. Keep in mind that this method will align the top part of the input box at the center. In order to adjust it correctly, you may need to move it upwards by half of its height.

...
main input {
  position: relative;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 3em;
}
...

Answer №3

To achieve the desired effect, use transform:translateY(-50%) and set the position:relative property for the main div. Ensure you also add the necessary vendor prefixes.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  background-color: #fafafa;
  width: 100%;
  height: 10%;
}
main {
  background-color: #000;
  width: 100%;
  height: 50%;
          position:relative;
}
main input {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 60%;
  height: 3em;
          -moz-transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          
}
footer {
  background-color: #fafafa;
  width: 100%;
  height: 40%;
}
<!DOCTYPE html>
<html>

<head>
  <title>Layout Example</title>
</head>

<body>
  <header></header>
  <main>
    <input type="text">
  </main>

  <footer></footer>
</body>

</html>

Answer №4

Adjust the main position to relative

while setting your input position to absolute

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
header {
  background-color: #fafafa;
  width: 100%;
  height: 10%;
}
main {
  background-color: #000;
  width: 100%;
  height: 50%;
          position: relative;
}
main input {
  position: absolute;
  top: 25%;
  left: 20%;
  width: 60%;
  height: 3em;
}
footer {
  background-color: #fafafa;
  width: 100%;
  height: 40%;
}

<!DOCTYPE html>
<html>

<head>
  <title>Example of a Layout</title>
</head>

<body>
  <header></header>
  <main>
    <input type="text">
  </main>

  <footer></footer>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to incorporate unique breakpoints in Bootstrap 4 and effectively utilize responsive breakpoint mixins in SCSS for a tailor-made responsive design

I am currently developing an Angular 5 application that requires responsiveness. I am encountering difficulties in making it responsive for different resolutions such as 1366X768 and 1920X1080 where font sizes vary. Issue 1: I have customized breakpoints ...

cssangularbootstrap-4

What occurs when Render() is called during animation in React?

Curious about how React handles rendering during a component's animation? Let's explore an example where a component is re-rendered due to a state change triggered during its animation. Imagine a scenario where a component's animation lasts ...

javascripthtmlcssreactjsreact-transition-group

Flashing Dropdown Navigation Bar on Internet Explorer and Firefox

Hey there! I have been working with a drop-down menu on various websites without any issues, but for some reason, it's acting up in this specific application (). The menu seems to flicker and is not properly positioned in Firefox and IE8-10, although ...

jquerycssdrop-down-menunavigation

Differences in Column Height between Bootstrap 4 on Mobile and Desktop Devices

My design includes two columns on desktop, each with a size of 6. https://i.sstatic.net/M33c8.png However, on mobile, I want these columns to adjust to the height of the phone screen. https://i.sstatic.net/3Z44d.png Is there a way to make the height va ...

cssbootstrap-4flexbox

Error: Unable to access the 'nom_gr' property of null - encountered in Chrome

<ion-col col-9 class="sildes"> <ion-slides slidesPerView="{{nbPerPage}}" spaceBetween="5"> <ion-slide *ngFor="let slide of lesClassrooms; let i = index" (click)="saveCurrentSlide(i)"> ...

javascripthtmlangularionic2

What could be the reason for the fluctuating HTML output?

Exploring the world of CSS and HTML, I noticed a curious change in the output when text is added inside a div tag. First: div.bar { display: inline-block; width: 20px; height: 75px; /* We'll override height later */ background-co ...

htmlcss

PHP: The reasons why isset function may not be functioning as expected

Hello everyone, I am new to PHP and have a very basic question. I have two scenarios in mind: 1. By default, on loading, the page should display "June". 2. If the user clicks the submit button, "Jan" should be displayed. Here is my simple.php file (P ...

phphtml

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

htmljsonspring-bootoauth-2.0spring-security-oauth2

Ensuring the HTML remains at its original scale while scaling a div using CSS

My code consists of HTML and CSS that look like this: <div class="box" style="transform: scale(2);"> <div class="text">This is my text.</div> </div> I'm trying to figure out how to prevent the text inside the box from sca ...

jqueryhtmlcssjquery-ui

Connecting event listeners to offspring elements, the main element, and the entire document

My request is as follows: I have multiple boxes displayed on a webpage, each containing clickable divs and text. When a user clicks on a clickable div, an alert should appear confirming the click. Clicking on the text itself should not trigger any action. ...

javascripthtmljquerycssjquery-events

Determine the prior location of an element using jQuery

Is there a way to track the previous location of an element before it is appended? I have 50 elements that need to be appended to different targets based on a certain condition. How can I determine where each element was located before being moved? $(&a ...

javascriptjqueryhtml

Is it achievable to modify the appearance of the "Saved Password" style on Firefox?

After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design: https://i.sstatic.net/LURG3.png I am ...

javascripthtmlcssfirefox

Tips for assigning dynamic #id(*ngFor) and retrieving its value in Angular2

In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...

htmlangulardata-binding

What is the process for incorporating an additional input in HTML as you write?

I am looking to create a form with 4 input boxes similar to the layout below: <input type="text" name="txtName" value="Text 1" id="txt" /> <input type="text" name="txtName2" value="Text 2" id="txt" /> <input type="text" name="txtName3" valu ...

javascriptjqueryhtml

Escaping an equal sign in JavaScript when using PHP

I am currently working on the following code snippet: print "<TR><TD>".$data->pass_name."</TD><TD><span id='credit'>".$data->credit_left."</span></TD><TD><input type='button' val ...

phpjavascripthtmlajax

Struggling to make divs reach the bottom of the page? Check out my jsFiddle for a solution!

I'm facing difficulty in extending the left and right divs to the bottom of the page, with no additional space above or below. You can view my progress here: http://jsfiddle.net/qggFz/26/ Appreciate any help, Dale ...

javascriptjquerycss

Displaying messages in an Angular 2 chatbox from the bottom to the top

As a newcomer to using typescript, I am currently working on an angular 2 project and facing some challenges with creating a chatbox. My goal is to have new messages displayed at the bottom while pushing the old ones up one line at a time, as shown in this ...

htmlcssnode.jsangulartypescript

Implementing @Font-Face in C# Code Behind

Within my stylesheet, I have defined the following: @font-face { font-family: 'light'; src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype'); } Now, in my C# code behind, I am attempting to assign the class ...

c#cssasp.netfont-face

Scrollbar width does not expand when hovered over

I am having trouble increasing the width of the scrollbar when hovering over it. However, I keep receiving an error in the console stating that 'scrollbar.addEventListener' is not a function. JAVASCRIPT setTimeout(function() { const scrollbar ...

javascripthtmlcss

Label positioning for checkboxes

Is there a way to display the checkbox label before the actual checkbox without using the "for" attribute in the label tag? I need to maintain the specific combination of the checkbox and label elements and cannot use nested labels or place other HTML elem ...

javascripthtmlcsscheckbox