CODEWITHSUNDEEP
htmlcss
Yich Lin
Yich Lin

Reputation: 435

How to center element in screen?

here is example. https://codepen.io/vi000246/full/VwaZJOb

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="reset.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">

    <title>TESTSTR INVITE CODE</title>
    <div class="title">
        <img src="https://via.placeholder.com/150x80" alt="LOGO">
        <p class="bigSize mainTitle">TESTSTR INVITE CODE</p></div>

</head>

<body>
    <div class="wrap">
        <div class="item">
        <form action="" class="form1">
            <label for="iCode" class="regSize">please input code</label>
            <input type="text" class="inviteCode" placeholder="cooooood" name="iCode"><br><br>
            <input type="submit" class="send" value="send">
            <input type="reset" class="clear" value="clear">
        </form></div>
    </div>
    
</body>




</html>

I want center all element in div. "TESTSTR INVITE CODE" "please input code" input field and two button. I have try position:relative and absolute text-align: center display: inline-block But still cannot move element horizontal center. how to adjust css to achieve this result?

Upvotes: 0

Views: 40

Answers (1)

Pete
Pete

Reputation: 58412

You can use flex on the body (if that is your only element):

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
<div class="wrap">
  <div class="item">
    <form action="" class="form1">
      <label for="iCode" class="regSize">please input code</label>
      <input type="text" class="inviteCode" placeholder="cooooood" name="iCode"><br><br>
      <input type="submit" class="send" value="send">
      <input type="reset" class="clear" value="clear">
    </form>
  </div>
</div>

Also you need to remove the div from your head section - it is invalid

Upvotes: 3

Related Questions