CSS 将button按钮垂直+水平居中
参考文章:CSS实现垂直居中的5种方法
具体效果如图:
这个方法使用了一个position:absolute,有固定宽度和高度的 div。这个 div 被设置为top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此margin:auto;会使它居中。使用 **margin:auto;**使块级元素垂直居中是很简单的。
.vert-center{position:absolute;top:0;bottom:0;left: 0;margin: auto;right: 0;}
我用的是colorui框架的样式
.text-center{text-align:center;//实现水平居中}
一开始想只用left: 0;right: 0;来实现水平居中,
结果发现不行,得加text-center的,缺一不可
<div id="w1" class="act-photo" style="position:relative;height:300rpx;width:100%;margin:auto"><div id="w2" class="vert-center text-center" style="height:64rpx;"><button class="cu-btn bg-black text-white shadow-blur text-xs" style="opacity: 0.7;width:150rpx;" @click="download">下载</button><button class="margin-left cu-btn bg-black text-white shadow-blur text-xs" style="opacity: 0.7;width:150rpx;" @click="submit">提交</button></div></div>
这里关键的地方就是id=w2这个div;
如果没有加这个div的话,两个按钮会发生重叠。
这个div的作用是使w2先垂直居中于w1
(这里要注意设置w2的height高度跟button的相等,不设置的话高度会等于w1的导致无法垂直居中)