Question

这是示例。 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>

我要在div中将所有元素居中。 “ TESTSTR邀请码” “请输入代码” 输入栏和两个按钮。我有尝试位置：相对和绝对文字对齐：居中显示：内联块但是仍然不能移动元素水平中心。如何调整CSS以达到此效果？

Answer 1

您可以在主体上使用flex（如果这是您唯一的元素）：

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>

还需要从头部删除div-无效

如何在屏幕上居中放置元素？

1 个答案: