我试图将我的按钮放在页面上，但似乎无法正确使用。 我尝试过自动左右边距，但没有奏效。而且我不想以百分比的直觉感受中心。有人可以帮助我，会很感激。它适用于我的船员：D
这里你有html。我使用了基本的html和纯网格和bootstrap：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>karakters page</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
<link rel="stylesheet" href="stylekarakters.css">
</head>
<body>
<div class="fixed-bg">
<div class="pure-g">
<div class="pure-u-1-2">
<a href="#null" class="homeknop" onclick="window.location.href='index.html';">
<span class="glyphicon glyphicon-home"></span>
</a>
</div>
<div class="pure-u-1">
<img class="pure-img logo" src="img/Karakters-logo_ZW2.png"></img>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="imgcontainer">
<img class="pure-img" src="img/pic-karakters.jpg" />
</div>
</div>
<div class="pure-u-1">
<h1 class="reveal1">
<strong>Ontwerp- en communicatiebureau.<br>Groot geworden in de boeken, <br>met grafiek in de genen</strong>
</h1>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<div class="textcontainer">
<h2><strong>Nu bieden we het hele pallet aan communicatieondersteuning.</strong></h2>
</div>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-strategy.png" />
<h4>strategische begeleiding <br>(ook pers en digitaal)</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-web.png" />
<h4>webontwikkeling</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-campagne.png" />
<h4>creëren van campagnes</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-expo.png" />
<h4>maken van tentoonstellingen als grafische vormgeving</h4>
</div>
<div class="pure-u-1-5">
<img class="pure-img icon" src="img/icon-boeken.png" />
<h4>ontwerpen en zetten <br>van boeken, etc.</h4>
</div>
<div class="pure-u-1-5"></div>
</div>
<div class="pure-g">
<div class="pure-u-1"><h2><strong>We zijn er voor u, allemaal!</strong></h2></div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_nonprofit-3.png" />
<h4>non-profit</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_government-3.png" />
<h4>overheid</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_uitgeverij-4.png" />
<h4>uitgeverijen</h4>
</div>
<div class="pure-u-1-4">
<img class="pure-img icon" src="img/icon_profit-3.png" />
<h4>profit</h4>
</div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3"></div>
<div class="pure-u-1">
<h2>Kortom: alles op maat van de opdrachtgever.<br>Maar altijd vanuit hetzelfde kader:
<br><strong> duurzaam, kwalitatief</strong> en <strong>authentiek</strong>
</h2>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1">
<h4 class="projecten">projecten</h4>
</div>
<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
</div>
<!-- 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="js/bootstrap.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script src="scriptkarakterspage.js"></script>
</body>
</html>
这是css，也是基本的：
body{
background-color: rgba(111, 179, 160, 0.1);
margin-top: 5em;
margin-left: auto;
margin-right: auto;
width: 90%;
}
.imgcontainer .pure-img {
max-width: 40%;
margin-left:auto;
margin-right: auto;
margin-top: 3em;
}
.icon{
max-width: 66%;
margin-left: auto;
margin-right: auto;
}
/* h3
}
{
margin-left: -250px;
margin-right: 250px;
margin-top: 100px;
line-height: 1.3em;
} */
h1,h2{
padding:1em;
text-align: center;
}
h4{
text-transform: uppercase;
text-align: center;
font-weight: bold;
}
.pure-u-1 .textcontainer p {
margin-left: auto;
margin-right: auto;
width: 40%;
font-size: 1.5em;
text-align: center;
}
.textcontainer{
margin-top: 5em;
}
.pure-img.logo {
max-width: 100px;
margin-left: auto;
margin-right: auto;
margin-top: -55px;
}
.projecten {
margin-left: auto;
margin-right: auto;
margin-top: 2em;
color:#6fb3a0;
}
div .pure-u-1 .buttonK
{
border: solid #6fb3a0 2px;
background-color: #6fb3a0;
color: #ffffff;
width: 50px;
height: 50px;
border-radius: 100%;
text-align: center;
}
div.pure-u-1 button.buttonK{
margin-left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
}
a {
margin-left: 100px;
color:#6fb3a0;
}
答案 0 :(得分：0)
你可以这样做：
将left:50%提供给button，然后将margin-left
div.pure-u-1 button.buttonK {
left: 50%;
margin-bottom: 2em;
margin-top: 1.5em;
position: relative;
margin-left: -25px;
}
<强> DEMO HERE
答案 1 :(得分：0)
当您从左侧推送50％的内容时，使用CSS3非常简单：
.class {
margin-left: 50%;
transform: translateX(-50%);
}
与transform: translateY(-50%);一起垂直工作。
2可以合并为transform: translateX(-50%) translateY(-50%);。
使用此功能时，您可能需要添加特定于供应商的前缀。正在搜索＆＃34; CSS自动前缀＆＃34;应该提供在线服务，以便您快速完成。
答案 2 :(得分：0)
试试这个。将display:block;添加到按钮。这将使margin:auto;工作。
.buttonK {
margin: auto;
display: block;
}<div class="pure-u-1">
<button onclick="window.location.href='catpageK.html';" class="buttonK">Button</button>
</div>