我有一个表单，其输入字段全部水平首尾对齐。我希望它在网页的中心对齐。我尝试使用 margin: 0 auto。那没有帮助。我也尝试过 position: absolute 和 left top 但这并没有给我想要的结果。 
同时提交按钮居中对齐。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>APT - Aviation | Travel | Hospitality</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div class="background-wrap">
<video id="video-bg-elem" poster="images/clouds-from-an-airplane-window-picjumbo-com.gif" preload="auto" autoplay="true" loop muted>
<source src="video/clouds.mp4" type="video/mp4">
</video>
</div>
<div id="logo">
<a href="index.php"><img src="images/APT-LOGO-PNG.png" ></a>
</div>
</div>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<input type="tel" class="form-control" id="contact" name="contact" placeholder="Enter contact">
</div>
<button style="display:block;" type="submit" class="btn btn-default">Submit</button>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
最佳答案
为表单使用以下 css:
position:absolute;
left: 50%;
top : 50%;
transform: translate(-50%, -50%);
关于html - 在网页中心对齐一个水平表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43304291/