Using text-align: center将嵌套元素水平居中
您可以通过声明来实现这一点text-align: center在包含父元素上（.wrapper）并声明display: inline-block在嵌套的子元素上。
position: absolute必须删除，因为我们想要keep自然界中的元素文件流- 为了使此方法起作用，元素必须是static或定位relative.
Note:对于水平对齐，使用text-align: center要按预期工作，应满足一些要求：
- 包含父元素必须是block元素（例如：
display: block)
- 您需要居中的嵌套元素应该是内联块元素（例如：
display: inline-block)
- No
float规则应该在您所在的嵌套元素上声明
打算水平对齐，float规则将抵消任何努力
以这种方式对齐元素
* {
box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}
.wrapper {
text-align: center;
background: gray; /* so we can actually see what's happening */
padding: 20px; /* Give us some breathing room */
}
.button {
display: inline-block; /* naturally creates "whitespace" between inline elements */
}
.button1 {
background-color: Transparent;
background-repeat:no-repeat;
padding:20px;
color: white;
border: 3px solid #fff;
/* non-essential augmentations */
transition: .7s; /* smooth out the state change on pseudo-state :hover */
min-width: 100px;
}
.button1.with-margin {
margin: auto 10px; /* for additional spacing between inline elements*/
}
.button1:hover{
border: 3px solid #000;
}
<div class="wrapper">
<button class="button button1">button</button>
<button class="button button1">button2</button>
</div>
<br>
<div class="wrapper">
<button class="button button1 with-margin">button</button>
<button class="button button1 with-margin">button2</button>
</div>
或者...你可以只需使用 Flex...
Using flex-box将嵌套元素水平居中
通过声明display: flex在包含父元素上（.wrapper), then justify-content: center指定水平对齐方式，您将获得预期的结果。flex-box利用浏览器的内置功能来完成所有“繁重的工作”和精确对齐的计算 - 顺便说一句，这也使其成为流行的响应式解决方案。
.wrapper {
text-align: center;
background: gray; /* so we can actually see what's happening */
padding: 20px; /* Give us some breathing room */
/* Additional */
display: flex;
justify-content: center;
}
* {
box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}
.wrapper {
text-align: center;
background: gray; /* so we can actually see what's happening */
padding: 20px; /* Give us some breathing room */
/* Additional */
display: flex;
justify-content: center;
}
.button {
display: inline-block; /* naturally creates "whitespace" between inline elements */
}
.button1 {
background-color: Transparent;
background-repeat:no-repeat;
padding:20px;
color: white;
border: 3px solid #fff;
/* non-essential augmentations */
transition: .7s; /* smooth out the state change on pseudo-state :hover */
min-width: 100px;
margin: auto 10px; /* additional spacing between nested elements */
}
.button1:hover{
border: 3px solid #000;
}
<div class="wrapper">
<button class="button button1">button</button>
<button class="button button1">button2</button>
</div>
小心！ flex-box对旧版浏览器的支持很差或有限，因此如果这将成为您所关心的问题，那么最好不要在生产中使用它。
IE 不支持
即 10,11 -部分支持
查看更多： https://caniuse.com/#feat=flexbox https://caniuse.com/#feat=flexbox
Edit
垂直和水平对齐使用flex-box & position: absolute
.wrapper {
text-align: center;
background: gray; /* so we can actually see what's happening */
padding: 20px; /* Give us some breathing room */
/* Additional */
display: flex;
justify-content: center;
/* Further Additions */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
* {
box-sizing: border-box; /* always useful when working with border or padding properties, or any other property that can effect the box-model */
}
.wrapper {
text-align: center;
background: gray; /* so we can actually see what's happening */
padding: 20px; /* Give us some breathing room */
/* Additional */
display: flex;
justify-content: center;
/* Further Additions */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.button {
display: inline-block; /* naturally creates "whitespace" between inline elements */
}
.button1 {
background-color: Transparent;
background-repeat:no-repeat;
padding:20px;
color: white;
border: 3px solid #fff;
/* non-essential augmentations */
transition: .7s; /* smooth out the state change on pseudo-state :hover */
min-width: 100px;
margin: auto 10px; /* additional spacing between nested elements */
}
.button1:hover{
border: 3px solid #000;
}
<div class="wrapper">
<button class="button button1">button</button>
<button class="button button1">button2</button>
</div>
