在写 CSS 的过程中, 我常常谷歌一个东西, 就是如何实现元素的垂直居中, 水平居中难度还不是很大, 但是垂直居中我这个烂记性是写一次忘一次, 于是本着好记性不如烂笔头的想法, 写下一篇博客记录下来. 那么今天就记录下三种垂直居中的方法, 各位看官按需使用.
通用情况
首先我们先介绍一种通用情况下的垂直居中, 这个方法不需要设置自己的高度, 也不需要父容器设置高度, 利用绝对定位只需要三行代码就能实现.
首先 html 代码长这个样子
- <div id="outter1">
- <div class="inner1"></div>
- <div class="inner2">
- <div > 这里的子元素自适应, 不设置高度 </div>
- </div>
- </div>
那么来看 css 代码如何完成垂直居中:
- #outter1{
- position:relative;
- background:black;
- }
- #outter1 .inner1{
- display:inline-block;
- width:400px;
- height:400px;
- background:red;
- }
- #outter1 .inner2{
- background:blue;
- position: absolute;
- top: 50%;
- transform: translateY(-50%);
- }
父容器设置了高度, 父容器下只有一个元素的情况
若是父容器设置了高度, 父容器里只有一个元素, 那么使用相对定位即可完成垂直居中.
html 代码:
- <div id="outter2">
- <div class="inner2">
- <div > 父亲设置了高度, 且只有我一个子元素 </div>
- </div>
- </div>
css 代码:
- #outter2{
- position:relative;
- background:black;
- height:400px;
- }
- #outter2 .inner1{
- display:inline-block;
- width:200px;
- height:200px;
- background:red;
- }
- #outter2 .inner2{
- display:inline-block;
- background:blue;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- }
Flex 布局搞定垂直居中
如果不用考虑老式浏览器兼容的话, 直接用 flex 布局来搞定就是非常简单的了, 三行代码搞定垂直居中.
- <div id="outter3">
- <div class="inner1">
- <div > 子元素 1</div>
- <div > 子元素 2</div>
- <div > 子元素 3</div>
- </div>
- </div>
- #outter3.inner1 {
- display:flex;
- display: -webkit-flex;
- align-items:center;
- }
这就是三种 CSS 里垂直居中的方法了, 希望写下这篇文章的我, 在遇到垂直居中的问题时, 再也不用谷歌了.
来源: http://www.jianshu.com/p/f4e198728e3b