时间戳

首页 > 解决方案 > 如何在屏幕中居中元素？

html - 如何在屏幕中居中元素？

问题描述

这是示例。 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 INVITE CODE”“请输入代码”输入栏和两个按钮。我尝试了位置：相对和绝对文本对齐：中心显示：内联块但仍然无法移动元素水平中心。如何调整css来达到这个效果？

标签： htmlcss

解决方案

您可以在 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>

您还需要从头部删除 div - 这是无效的

推荐阅读