button在div中垂直居中_CSS实现垂直居中的常⽤⽅法在前端开发过程中，盒⼦居中是常常⽤到的。其中 ，居中⼜可以分为⽔平居中和垂直居中。⽔平居中是⽐较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是⽐较复杂⼀些的。下⾯我们⼀起来讨论⼀下实现垂直居中的⽅法。
1.如图需实现黄⾊盒⼦垂直居中
代码如下：
现在我们需要将sub-box盒⼦居中；那么⼀共有多少种⽅法呢？
1.我们可以知道外⾯盒⼦宽⾼，⾥⾯盒⼦宽⾼也清楚，那么，就很简单了，对，就是定位了，⾸先给外⾯盒⼦相对定位，⾥⾯盒⼦绝对定位就好了
2.第⼆种⽅法(通过设置div的transform: translate(-50%)，意思是使得div向上、向右平移(translate)⾃⾝⾼度、宽度的⼀半(50%))
上述⽅法我们都是基于设置div的top值为50%之后，再进⾏调整垂偏移量来实现居中的。如果使⽤CSS3的弹性布局(flex)的话，问题就会变得容易多了。
3.通过flex布局，代码稍微调整⼀下就ok。
最终效果：
除了上⾯3中⽅法之外，当然可能还存在许多的可以实现垂直居中的⽅法。因为这也是我⼯作中常⽤的，⼤家可以讨论前端的各种知识点，这个也是我第⼀篇⽂章，希望可以也⼤家⼀起多多分享web前端的知识，后⾯⽂章希望越写越好。
css设置文字垂直居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。