margin:0 auto;为什么不能使标签button水平居中？
*{padding:0;margin:0;}
/*顶部样式*/
.body{
min-width: 1200px;
}
.top{
width:100%;
height:100px;
background-color:#07cbc9;
/*overflow: hidden;*/
position:fixed;
top:0;
z-index: 10;
}
.top .logo{
float:left;
padding-top:25px;
padding-left:100px;
}
.top .logo img{
height:50px;
}
.top .logo a{
list-style:none;
}
.top .nav{
float:right;
padding-right:80px;
}
.top .nav .nav-li{
list-style:none;
color:#fff;
font-size:14px;
font-weight:bold;
}
.top .nav .nav-li li{
float:left;
height:100px;
line-height:100px;
}
.top .nav .nav-li a{
text-decoration: none;
color:#fff;
padding:0 10px;
display:block;
height:100px;
}
.top .nav .nav-li a:hover{
background-color:#000;
}
/*banner图*/
.Banner .banner{
/*padding-top:100px;*/
}
.Banner .banner img{
width:100%;
height:600px;
display: block;
}
/*banner图遮盖层*/
.Banner .shade{
width:100%;
height:600px;
background: #000;
opacity:0.4;
position:absolute;
top:0px;
}
/*banner图和about区域宽度为整个页面*/
.Banner,.about{
width:100%;
/*height:600px;*/
/*position:relative;*/
}
.Banner{
position:relative;
margin-top:100px;
}
/*banner图输入框和按钮*/
.Banner .biaodan{
width:600px;
height:400px;
/*background-color: red;*/
text-align:center;
display:table;
position:absolute;
/*top:50%;
left:50%;
margin-left:-300px;
margin-top:-200px;*/
top:100px;
left:50%;
margin-left:-300px;
z-index: 2;
}
.Banner .biaodan form{
display: table-cell;
vertical-align: middle;
}
.Banner .biaodan form input{
width:400px;
height:40px;
margin:10px 0;
background: transparent;
color:#aaa;
/*表单颜色变淡*/
border:1px #aaa solid;
padding-left:10px;
}
.Banner .biaodan form .comment{
height:100px;
width:400px;
margin:10px 0;
padding-top:15px;
padding-left:10px;
border:1px #aaa solid;
color:#aaa;
background: transparent;
}
.Banner .biaodan form .button{
width:150px;
/*padding:0 10px;*/
padding-left:0;
}
.Banner .biaodan form input:hover{
border:1px #07cbc9 solid;
}
.Banner .biaodan form .comment:hover{
border:1px #07cbc9 solid;
}
.Banner .biaodan form .button:hover{
background: #07cbc9;
}
/*about部分*/
/*about的上半部分*/
.about .about-up hr{
width:50px;
/*color:#07cbc9;
background: #07cbc9;*/
border:1px #07cbc9 solid;
/*margin:0 auto;*/
margin:20px auto;
}
.about .about-up{
/*padding:0 300px;*/
width:1200px;
margin:0 auto;
text-align: center;/*使文本内容都水平居中*/
margin-bottom:100px;
}
.about .about-up .a-u-up{
padding:30px 0;
font-family:"Microsoft YaHei UI";
}
.about .about-up .a-u-up p{
line-height: 30px;
}
.about .about-up .a-u-middle{
overflow: hidden;
}
.about .about-up .a-u-middle .left,
.about .about-up .a-u-middle .right{
float:left;
width:300px;
font-family:"Microsoft YaHei UI";
}
.about .about-up .a-u-middle .right .right1,
.about .about-up .a-u-middle .right .right2{
display:table;
margin:0 auto;
}
.about .about-up .a-u-middle .right .right1 .right-up,
.about .about-up .a-u-middle .right .right2 .right-down{
width:240px;
height:140px;
border:1px #07cbc9 solid;
display:table-cell;
vertical-align: middle;
}
.about .about-up .a-u-middle .right .right2{
margin-top:30px;
}
.about .about-up .a-u-middle .middle img{
width:600px;
}
.about .about-up .a-u-middle .middle{
float:left;
width:600px;
}
.about .about-up .a-u-down{
/*float:left;*/
position:absolute;
/*margin-left:-500px;*/
margin-top:-300px;
margin-left:30px;
width:400px;
height:250px;
text-align: left;
border:1px #ccc solid;
/*background:transparent;*/
/*opacity:0.5;*/
/*opacity的透明度子元素a-u-down1可以继承，但是在效果上子元素是没有透明效果的*/
z-index: 2;
display: table;
font-family: "Microsoft YaHei UI";
background:rgba(255,255,255,0.5);
/*0.5代表透明度*/
}
.about .about-up .a-u-down .a-u-down1{
/*width:350px;
height:200px;*/
display:table-cell;
vertical-align: middle;
line-height: 30px;
padding-left:20px;
}
.about .about-up .a-u-down .a-u-down1 button{
width:100px;
height:45px;
background:#000;
border: 1px #000 solid;
color:#fff;
font-size: 16px;
margin-top:20px;
cursor:pointer;
}
.about .about-up .a-u-down .a-u-down1 button:hover{
color:black;
background:#fff;
}
/*.middle .about-up .a-u-zg{
width:400px;
height:250px;
background:#fff;
opacity: 0.5;
position:absolute;
margin-top:-300px;
margin-left:30px;
z-index:1;
}*/
/*about的下半部分*/
.about .about-down{
width:100%;
overflow: hidden;
}
.about .about-down .a{
width:25%;
height:400px;
float:left;
}
.about .about-down .a img{
width:100%;
height:400px;
}
/*箭头*/
.about .about-down .box{
width:0;
height:0;
border-right:25px solid #07cbc9;
border-left:25px solid transparent;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
margin-left:-50px;
margin-top:185px;
float:left;
/*border-bottom:transparent;*/
}
/*箭头*/
.about .about-down .box1{
width:0;
height:0;
border-right:25px solid transparent;
border-left:25px solid #07cbc9;
border-top:15px solid transparent;
border-bottom:15px solid transparent;
/*margin-right:50px;*/
margin-top:185px;
position: relative;
z-index:100;
float:left;
/*border-bottom:transparent;*/
}
/*使图片左移与箭头重叠*/
.about .about-down .b{
margin-left:-50px;
}
.about .about-down .wz1{
background:#07cbc9;
color:#fff;
/*text-align: center;*/
}
.about .about-down .wz1 h1{
padding:30px 0 20px 40px;
text-align: left;
font-weight:normal;
}
.about .about-down .wz1 h3{
font-weight:normal;
padding:0 20px 20px 40px;
text-align: left;
line-height: 30px
}
.about .about-down .wz1 p{
opacity: 0.8;
padding: 0 20px 40px 40px;
text-align: left;
}
.about .about-down .wz1 button{
width:100px;
height:45px;
margin:0 auto;
/*为什么失效*/
background:#000;
color:#fff;
border:1px #000 solid;
cursor:pointer;
}
.about .about-down .wz1 button:hover{
background: #07cbc9;
color:black;
}
/*gallery部分*/
.gallery{
width:1160px;
margin:30px auto;
text-align: center;
}
.gallery .gallery-up hr{
width:50px;
border:1px #07cbc9 solid;
margin:20px auto;
}
.gallery .gallery-up p{
line-height: 30px;
}
.gallery .gallery-up{
padding:30px 0;
}
.gallery .gallery-down{
overflow: hidden;
}
.gallery .gallery-down .tp1{
float:left;
/*margin:0 auto;*/
/*为什么失效*/
}
.gallery .gallery-down .tp2{
padding:0 40px;
}
.gallery .gallery-down .tp1 img{
width:360px;
display:block;
/*font-size:0px;*/
}
/*.gallery .gallery-down .tp1 .zg1{
width:360px;
height:40px;
background:black;
}*/
/*.gallery .gallery-down .tp1 .zg1{
margin-top:-40px;
position:absolute;
}*/
.gallery .gallery-down .tp1 .wz2{
width:350px;
height:40px;
line-height: 40px;
background:transparent;
}
.gallery .gallery-down .tp1 .wz2{
margin-top:-40px;
position:absolute;
z-index: 2;
background: black;
color:#fff;
text-align: left;
padding-left:10px;
}
.gallery .gallery-down .tp3{
padding-top:40px;
padding-bottom:60px;
}
/*页脚部分*/
.buttom{
width:100%;
height:100px;
line-height: 100px;
color:#fff;
background: #07cbc9;
text-align: center;
}
正在回答
同学你好，button按钮是inline-block元素（行内块元素），因为button按钮既可以设置宽高，又不独占一行。
同学你好，因为只给老师粘贴了css样式没有粘贴html布局，老师没有办法进行测试哦。
可以根据老师举的例子来进行参考：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
button {
width: 150px;
height: 50px;
background: red;
border: none;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<button>按钮</button>
</body>
</html>想要button按钮居中显示，需要先把它转换成display：block元素，再设置固定的宽度，这样margin：0 auto就会让button按钮水平居中哦。
自己测试一下，如果帮助到了你，欢迎采纳。
祝学习愉快！
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星