CSS 垂直居中

时间 2019-11-08

标签 css 垂直居中栏目 CSS 繁體版

原文原文链接

欢迎你们先来看看个人水平居中篇：http://www.cnblogs.com/cuncunjun/p/6549955.html

首先要清楚一个问题，何时你会要设置垂直居中？你们不要被各类例子弄晕头，静下心来想想！
• 一个父元素，若是不设置高度的话，默认就是紧包着子元素，若是你的padding-top和padding-bottom是相等，那么这自己就是一个垂直居中的效果！！！！！css

• 固然，若是你的子元素并不独占一行，而是行内元素和inline-block元素的话就不同了。好比下面这个例子：html

<div id="container">
      <span>aaaaaaaaaaaa我我我</span>
      <img src="1.jpg" width="100px"/><img src="1.jpg" width="120px"/>
</div>

这涉及到一个知识点，就是line-box原理。详情可见张鑫旭老师的博客： http://www.zhangxinxu.com/wordpress/2010/01/css-float%E6%B5%AE%E5%8A%A8%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E3%80%81%E8%AF%A6%E8%A7%A3%E5%8F%8A%E6%8B%93%E5%B1%95%E4%B8%80/css3

inline和inline-block都是在一行显示，如图所示因为图片自己有高度，就会把整个行高撑大，可是文字和图片依然在一行。
相信细心地朋友会发现，图片下面有一条小空白。这就涉及到了vertical-align属性，张鑫旭老师的博客写的很详细。在这里我给你们简单总结一下。
vertical-align只对inline-block元素有效，换句话，inline-block 自带vertical-align属性。属性的值有不少，主要有下图这几种：chrome

Vertical-align默认值是baseline！即便你没有设置这个属性，也会有。因此图片是和整个line-box的baseline对齐，因此下面会有空白。浏览器

言归正传：这种状况下，谁想居中谁就本身设Vertical-align：middle；固然只对line-block有效！好比我对两个图片设置垂直居中，安全

#container{
     border:2px solid blue;
 }
img{
    vertical-align:middle ;
 }

效果如图所示，不少人可能会问，怎么文字也居中了呢？
答：其实不是文字居中，而是图片相对整个行居中，也就是文字所在的行居中，图片下移，这个时候上方被图片撑起来的line-height变矮了，因此整个行都上移，直到最高的图片碰到父元素的border。只不过视觉效果上是文字也居中了。wordpress

• 再而后，就是父元素设置了height，子元素如何垂直居中？
记住一点vertical-heigh只是针对inline-block有效，而且仅仅是相对元素所在line-box垂直居中！！也就是说只能在一行中折腾！布局

#container{
     border:2px solid blue;
     height:250px;
 }
img{
    display:inline-block;
    vertical-align:middle ;
}

我给父元素设置了高度，会发现图片仍然只在本身的那行居中，并不在整个父元素居中。
就算是块状元素设置display：inline-block，也是只在本身那一行居中！
因此这种状况，vertical-align就排不上用场了，固然仍是有居中的办法，具体见下文喽！！学习

1.line-height（适用单行文本)

height: 该元素的高度，line-height: 指在文本中，行与行之间的基线间的距离。
设置line-height，比font-size大就好了。height不设就行，默认是line-height的高，非得设值的话，就height=line-height便可。flex

<div class="container">
    hi,imooc!
</div>
<style>
  .container{
      /*height:100px;*/
      line-height:100px;
    }
</style>

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

2.适用于父元素有本身的的height，本身是块状元素的状况（最经常使用）

a. 负外边距:设置元素为absolute/relative/fixed，（1）偏移量（top或者bottom）设置为50%，（2）margin设置为元素宽度一半乘以-1。
若是块元素尺寸已知，能够经过如下方式让内容块居中于容器显示：
经过absolute设置top: 50%; left: 50%;外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半。

<div id="a">
      <div id="b">kkkkkkk</div>
</div>
#a{
    border: solid blue;
    width:800px;
    height:300px;
    position: relative;
    margin:50px;
    padding:40px;
}
#b {  
    width: 300px;  
    height: 200px;  
    padding: 20px;  
    position: absolute;  
    top: 50%;
    margin-top: -120px; /* height/2 + padding */  
}

注意此时absolute是在父元素的padding+content中居中，50%是父元素padding+content的50%；
relative是在父元素的content中居中，50%是父元素的content的50%；
fixed是视图居中，50%是可视窗口的50%，因此适用若是想要在浏览器居中。

b. position:absolute/fixed + top,bottom:0 + margin:auto

<div id="a">
    <div id="b">看我是否能够居中。</div>
</div>
#a{
    border: solid blue;
    width:800px;
    height:350px;
    margin:50px;
    padding:40px;
     position: relative;
}
#b {
    width: 300px;
    height: 100px;
    padding: 20px;
    border: 1px solid red;
    position:absolute;
    top:0;
    bottom: 0;
    margin:auto 0;
}

和水平居中是一个原理，若是被居中的元素没有设置height的话，content就会被扯大，充满父元素。
position：relative就失效了，由于他和父元素没有关系而是相对原来的位置偏移，上下设置top bottom：0是没有变化的。
fixed能够实现居中，只不过不是相对父元素而是可视窗口。

3.父元素height随意，本身是行内、块状都适用

a. table标签
使用插入 table(包括tbody、tr、td)标签

<body>
    <table><tbody><tr><td class="wrap">
         <div>
            <div>看我是否能够居中。</div>
            <div>看我是否能够居中。</div>
            <div>看我是否能够居中。</div>
        </div>
    </td></tr></tbody></table>
</body>
css代码：
table td{height:300px;background:#ccc;padding:0;}

由于 td 标签默认状况下就默认设置了 vertical-align 为 middle，因此咱们不须要显式地设置了。虽然我显示设值了padding为0，可是根据图片来看，td的content是紧包着子元素的，剩下的用padding来填充，因此视觉上是垂直居中的效果。不管里面包含的是文本仍是图片。

b. display:table-cell + vertical-align:middle
在 chrome、firefox 及 IE8 以上的浏览器下能够设置块级元素的display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE六、7 并不支持这个样式, 兼容性比较差。注意和新增table标签不同的是必定要设置vertical-align。（给父亲设不是给本身）

<div class="container">
    <div>
        <p>看我是否能够居中。</p>
    <img src=""/>
    </div>
</div>
<style>
  .container{
      height:300px;
      background:#ccc;
      display:table-cell;/*IE8以上及Chrome、Firefox*/
      vertical-align:middle;/*IE8以上及Chrome、Firefox*/
  }
</style>

感谢评论区的朋友，提供了一种新的思路。可是有一点错误，我后面会指正出来，无论怎么仍是谢谢你！
前面提到的都是css的传统布局方法，垂直居中实现起来确实什么麻烦。2009年，W3C提出了一种新的方案—- Flex布局，能够简便、完整、响应式地实现各类页面布局。目前，它已经获得了全部浏览器的支持，这意味着，如今就能很安全地使用这项功能。
关于flex布局的基础知识我就不一一列举了，菜鸟教程这一节讲的什么清晰，你们能够自行学习。 http://www.runoob.com/w3cnote/flex-grammar.html

4.CSS3的flex弹性盒子布局法

让我带着你们来逐步尝试，首先给父元素设置display：flex，并设置按照主轴的排列方式即水平方向从左到右依次排列row,若是你想要垂直居中的子元素只有一行能够设置nowrap。若是你想要好几行元素做为总体一块儿居中的话就能够设置wrap。flex布局真的很神奇很方便！

#container{
    width:600px;
    border:2px solid blue;
    display:flex;
    flex-flow: row  nowrap;
 }

<div id="container">
    <span id="child">aaaaaaaaaaaa我我我</span>
    <img src="1.jpg" width="100px"/>
    <img src="1.jpg" width="120px" />
    <img src="1.jpg" width="80px" />
    <img src="1.jpg" width="110px"/>
</div>

注意：此时我仍然按照CSS里面的习惯，只对img的width设置了，没有对height设置。然而在flex布局中行不通，图片的高度不在根据宽度等比例自使用设置了，而是会填满整个父元素。

那咱们给图片分别设置好高度以后，接下来，就要真正的设置垂直居中了！
注意justify-content:center;是水平居中。而垂直居中是align-items:center;
附上完整代码：

#container{
            width:600px;
            border:2px solid blue;
            height:250px;
            display:flex;
            flex-flow: row  nowrap;
            align-items:center;
        }
<div id="container">
    <span id="child">aaaaaaaaaaaa我我我</span>
    <img src="1.jpg" width="100px" height="100px"/>
    <img src="1.jpg" width="120px" height="120px"/>
    <img src="1.jpg" width="80px" height="80px"/>
    <img src="1.jpg" width="110px" height="110px"/>
</div>

完美！！！
有同窗可能会产生疑问，若是子元素是块状元素怎么办？ flex布局很强大，不管子元素是块状仍是行内通通都排排坐在一行，谁也不能独占一行。进了flex的门，一辈子都是flex的魂！！！ flex还有不少其余好玩的属性，你们能够本身去练练手，十分有趣！！