align-items: center; is not working properly-CodePudding

I'm new to React and I'm working on a React Typescript project. There, I want to center my form.

So here is my InputField.tsx code :

import React from 'react';
import './styles.css';

const InputField = () => {
  return (
    <form className="input">
      <input type="input" placeholder="Enter a task?" className="input_box" />
      <button className="input_submit" type="submit">
        Go
      </button>
    </form>
  );
};

export default InputField;

And here is my stles.css code;

.input {
  display: flex;
  width: 90%;
  position: relative;
  align-items: center;
}

.input_box {
  width: 100%;
  border-radius: 50px;
  padding: 20px 30px;
  font-size: 25px;
  border: none;
  transition: 0.2s;
  box-shadow: inset 0 0 5px black;
}
.input_box:focus {
  box-shadow: 0 0 10px 1000px rgba(0, 0, 0, 0.5);
  outline: none;
}

.input_submit {
  position: absolute;
  width: 50px;
  height: 50px;
  margin: 12px;
  border-radius: 50px;
  right: 0px;
  border: none;
  font-size: 15px;
  background-color: #2f74c0;
  color: white;
  transition: 0.2s all;
  box-shadow: 0 0 10px black;
}

.input_submit:hover {
  background-color: #388ae2;
}

.input_submit:active {
  transform: scale(0.8);
  box-shadow: 0 0 5px black;
}

Here ,I want to center the input class. But it doesn't work properly. Can some one assist me in this case?

CodePudding user response：

Try adding .input{ margin: 0 auto;}

CodePudding user response：

you have used 90% width for your .input class. that is why it looks like not being center. try this :

.input {
  display: flex;
  width: 100%;
  position: relative;
  align-items: center;
}