垂直居中(上下左右都居中)任何元素CSS代码

第三方分享代码
admin 2017-03-02 CSS学习 111 0

垂直左右上下居中CSS代码.png

看似简单的居中,不知道难住过多少人,特别是不同元素的居中,绝对不是一句center就能解决的,上图所示的居中就是一种万能居中,可以垂直上下左右统统居中,不!这绝不是黑魔法,真的可以垂直居中任何元素:

html, body {  height: 100%;  margin: 0;

}body {  -webkit-align-items: center;  

  -ms-flex-align: center;  

  align-items: center;  display: -webkit-flex;  display: flex;

}

上图所示的居中演示代码如下:

HTML演示代码:

<div class="container">

  <h1>Vertically-Center Anything!</h1>

</div>

CSS:

html, body {

  height: 100%;

  margin: 0;

}

body {

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  background: #03a9f4;

  display: -webkit-flex;

  display: flex;

  font-family: "Bitter", serif;

}

.container {

  margin: 0 auto;

}

h1 {

  color: #fff;

  font-size: 2.5em;

  text-shadow: 3px 2px 0 #03a9f4, 6px 5px 0 rgba(0, 0, 0, .15);

}

这还不够?垂直方向,水平方向?任何元素,任何时间,任何地点?CSS-Tricks 有篇好文 讲到了各种居中的技巧。

注意: IE11 对 flexbox 的支持有点 bug。

以后也会陆续分享各种居中问题。

 

网友评论

  • (*)
还没有评论!