垂直居中（上下左右都居中）任何元素CSS代码_CSS学习

资料来源：网络整理时间：2023/3/4 0:55:21 共计：3648 浏览

看似简单的居中，不知道难住过多少人，特别是不同元素的居中，绝对不是一句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。

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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：边框四边阴影CSS（box-shadow属性）内侧阴影、外侧阴影、阴影颜色CSS大全_CSS学习 | ·下一条：zblogphp模板制作——特效：菜单效果1_CSS学习