如何在屏幕中居中元素？答案

【问题标题】：How to center element in screen?如何在屏幕中居中元素？
【发布时间】：2020-08-04 14:22:27
【问题描述】：

这里是例子。 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来达到这个效果？

【问题讨论】：

您不能在head 中添加div...您的意思是header 吗？将div 移动到body 内部。

标签： html css

【解决方案1】：

你可以在 body 上使用 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>

您还需要从 head 部分中删除 div - 这是无效的

【讨论】：