大佬教程收集整理的这篇文章主要介绍了如何在不使用“位置：绝对；”的情况下将元素居中，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在处理我的个人网站，我需要在屏幕中央设置几个按钮，这些按钮将链接到我的 GitHub、简历和联系信息等内容，但我无法将按钮正确居中，问题是我'我得到是因为 position: absolute; 当我使用它时，项目正确居中，但它们都堆叠在一起，当我没有这个时，项目之间有适当的空间，但它们都粘在左上角页面的一角，所有在线教程都说使用位置：绝对；所以如果有人能提供帮助那就太好了，我会把我所有的代码放在下面。
button{
wIDth: auto;
display: table;
border: 1px solID #fff;
padding: 10px 20px;
border-radius: 20px;
color: #42337d;
cursor: pointer;
margin-top: 25px;
Transition: .2s;
Font-size: 18px;
Font-weight: 600;
text-decoration: none;
Font-size: large;
margin: 0;
position: absolute;
top: 45%;
left: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
outline: none;
}<HTML>
<head>
<Title>site</Title>
<script type="text/JavaScript" src="main.Js"> </script>
<link rel="stylesheet" type="text/CSS" href="style.CSS" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<button type="button" onClick="onClick()">GitHub</button>
<button type="button" onClick2="onClick2()">Resume</button>
<button type="button" onClick3="onClick3()">Contact Me</button>
</body>
</HTML>
添加此 CSS
body{
margin: 0;
min-height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
button{
width: auto;
display: table;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 20px;
color: #42337d;
cursor: pointer;
margin-top: 25px;
transition: .2s;
font-size: 18px;
font-weight: 600;
text-decoration: none;
font-size: large;
margin: 0 10px;
display:inline-block;
outline: none;
}<html>
<head>
<title>site</title>
<script type="text/javascript" src="main.js"> </script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<button type="button" onClick="onClick()">GitHub</button>
<button type="button" onClick2="onClick2()">Resume</button>
<button type="button" onClick3="onClick3()">Contact Me</button>
</body>
</html>,
使用弹性盒
flex-box
HTML
role = input("Your role: ")
if role == "student":
print("Students do not get keys!")
elif role == "administrator" or "teacher":
print("Administrators and teachers get keys!")
else:
if role != "administrator" or "teacher" or "student":
print("You can only be an administrator,teacher,or student!")
CSS
<body>
<div class="container">
<button type="button" onClick="onClick()">GitHub</button>
<button type="button" onClick2="onClick2()">Resume</button>
<button type="button" onClick3="onClick3()">Contact Me</button>
</div>
</body>
据我所知，您希望将按钮居中。您可以使用 flexbox 轻松完成。在这里，我附加了一个演示以根据视口将所有按钮居中。希望这会有所帮助。
确保您的按钮容器具有可用的高度和宽度来将其中的所有内容居中。
.btn-container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
button{
margin: 0 5px;
width: auto;
border: 1px solid #fff;
padding: 10px 20px;
border-radius: 20px;
color: #42337d;
cursor: pointer;
transition: .2s;
font-size: 18px;
font-weight: 600;
text-decoration: none;
font-size: large;
outline: none;
}<html>
<head>
<title>site</title>
<script type="text/javascript" src="main.js"> </script>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
</head>
<body>
<div class="btn-container">
<button type="button" onClick="onClick()">GitHub</button>
<button type="button" onClick2="onClick2()">Resume</button>
<button type="button" onClick3="onClick3()">Contact Me</button>
</div>
</body>
</html>以上是大佬教程为你收集整理的如何在不使用“位置：绝对；”的情况下将元素居中全部内容，希望文章能够帮你解决如何在不使用“位置：绝对；”的情况下将元素居中所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。