元素垂直居中总结

最新推荐文章于 2022-06-25 14:51:21 发布

冕妄

最新推荐文章于 2022-06-25 14:51:21 发布

阅读量486

点赞数

分类专栏： css 前端文章标签： css

本文链接：https://blog.csdn.net/creasher/article/details/51324733

版权

前端同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

首先，要先明白元素的‘高度’
如果对象是一个块级元素或者置换元素，那么它的高度就是设置height。
如果对象是一个内联元素（不可置换的），那么除了设置display，float等等，它的‘高度’，一般使用line-height(行间距)，font-size，vertical-align来设置。
ps：什么是可置换元素。W3C里面是这么说的

“An element that is outside the scope of the CSS formatter, such as an image, embedded document, or applet”
也就是说，置换元素主要是：img,input,textarea,select,object等等这类默认就有css团格式化外表范围的元素、

接下来总结下元素垂直居中问题。

我用的比较多的一个方法是，将父元素的行高和高度设置为一样。(height: 元素的高度，line-height: 行间距，指在文本中，行与行之间的基线间的距离 )。
不过这种方法的前提是：单行元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
        #div0{                                     
           background-color: red;
           height: 100px;
           line-height: 100px;
       }
    </style>
<body>
    <div id="div0">
        父元素的行高和高度设置为一样
    </div>
</body>
</html>

这里设置line-height：100px,也就是说行间距为100px，那么它会在一行的上面距离有50px，下面距离也有50px，然后如果有下一行，下一行的上面和上一行的下面的距离加起来就有100px，达到了100px行间距（行高）的效果.
2. 对于多行的元素。（1）可以用定位的方法，这里就不说明了。（2）可以用vertical-align，不过要注意的是，只有一个元素属于inline或inline-block（table-cell也可以理解为inline-block水平）水平，它的vertical-align属性才会起作用。这里要考虑兼容性问题。。。。。另外，这里的vertical-align是指行内元素的基线相对于该元素所在行的基线的垂直对齐。一般的话，这个属性要用的话，是要有和别的相邻元素比较的的，它是相对于别的元素的垂直的对齐方式。
o(╯□╰)o感觉这个好复杂，简单的理解就是对于父元素的基线或者字体的位置的对齐方式（要考虑到字体大小）。
可以取值：
这里写图片描述

详细的可以参考： http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8%AE%A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/
和
https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

6.13补充：关于定位，如果是position要注意是元素左上角的定位，具体要实现居中，可以联合css3的translate（-50%,-50%）；或者可以使用margin/padding来实现

12.6补充：也可以在要居中的元素旁边建立一个透明div，然后通过定位这个div来使目的元素定位

冕妄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素垂直居中总结

首先，要先明白元素的‘高度’ 如果对象是一个块级元素或者置换元素，那么它的高度就是设置height。如果对象是一个内联元素（不可置换的），那么除了设置display，float等等，它的‘高度’，一般使用line-height(行间距)，font-size，vertical-align来设置。 ps：什么是可置换元素。W3C里面是这么说的“An element that is outside
复制链接

扫一扫

专栏目录