CSS水平垂直居中总结

mist14 发布于2019-08-30 13:13 / 1216人阅读

摘要：垂直居中表格布局法为什么就能垂直居中拜读了张鑫旭大神的文章行高指的是什么行高指的是文本行的基线间的距离。行内框具有垂直居中性。

CSS水平居中、垂直居中、水平垂直居中方法总结

文字的水平居中:

text-align:center;

单行文字的垂直居中：

line-height:30px;
height:30px;

让有宽度的div水平居中：

margin: 0 auto;
width:300px;//必须要有宽度，margin:0 auto才能让它居中

让绝对定位的div垂直居中：

position:absolute;
top:0;
bottom:0;
margin:auto 0;  //垂直方向的auto 发挥的作用
width:300px;
height:300px;

同理，让绝对定位的div水平和垂直方向都居中：

position:absolute;
top:0;
left: 0;
right:0;
bottom:0;
margin:auto; 
width:300px;
height:300px;

已知宽高的容器的水平垂直方向居中：

width: 300px;
height:300px;
position: absolute;
top:50%;
left:50%;
margin-top: -150px; //自身高度的一半
margin-left:-150px;

未知宽高的容器的水平垂直方向居中：

width:300px;
height:300px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);

*注：transform属性，低版本浏览器不兼容，例如IE8

水平垂直居中记得要想到flexbox:

.container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.container .div{
//whatever
}

此时.div无论是否已知宽高，都能两个方向居中。

垂直居中（表格布局法）

.container{
  display: table;
}
.container .div{
  display: table-cell;
  vertical-align:middle;
}

为什么height=line-height就能垂直居中？

拜读了张鑫旭大神的文章：

行高指的是什么？
行高指的是文本行的基线间的距离。

什么是基线？
基线不是文字的下端沿。是英文字母X的下端沿。

文字有顶线，底线，基线和中线，用以确定文字行的位置。

什么是行距？
行高与字体尺寸之间的差。

还要理解一个概念 -- 行内框
行内元素会生成一个行内框。它无法显示出来，但是又确实存在。

在没有其他因素影响的时候，行内框等于内容区域。
> 设定行高可以增加或者减少行内框的高度，即：将行距的值（行高-字体尺寸）除以2，分别加到内容区域的上下两边。这是理解的关键，也就是内容区域的上面和下面均等增加一个距离。可以在一段文字上进行调试看看，发现增加减小line-height时，文字是整体上下缩进的，而非第一行不动，后面的向上靠拢。

行内框具有垂直居中性。即行内框占据的空间按与文字内容公用水平中垂线。（张鑫旭）

关于vertical-align:middle属性，也很神奇，可以好好再拜读下大神的文章。

云服务器 GPU云服务器水平垂直居中垂直居中实现垂直居中文字垂直居中

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115394.html

对css居中的一点总结

摘要：为了更好的加深对居中的理解，搜集和阅读相关资料，发现不错的文章将其整理出来。在学习前端的过程中，发现元素和文本的水平居中和垂直居中，是经常会出现的问题，在实际工作中也会经常碰到。居中的技巧有很多，但在编写代码的过程中，发现有时候技巧管用，有时候不管用，于是就将每个知道的方案都试一遍，找到合适的。这种情况究其原因是对居中的认识不够深入，只是停留在实现需求的水平上。为了更好的加深对居中的...

BenCHou 2019-08-29 11:17 评论0 收藏0
css居中总结

摘要：前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。又必须有个父级对其进行设置居中。前言一直有个想法要把各种居中的方法总结一下，但还是一直没有时间去整理。最近刚好在做样式重构的项目，顺便把一下自己有用过的或积累的居中方法给总结一下。水平居中行内元素水平居中行内元素的居中比较简单，直...

gxyz 2019-08-30 15:55 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

fnngj 2019-08-02 12:02 评论0 收藏0
总结：前端开发中让元素水平垂直居中的方法

摘要：如果要居中的块级元素直接是内联元素等，直接在其父级元素上加上属性即可图片之间，浏览器会产生默认的间距，父元素设置可以很好地解决这个问题。使用水平居中前提居中的元素必须是块级元素，如果是内联元素，需要添加属性而且元素不浮动。前端开发中，我们经常需要对元素进行水平垂直居中。为此，小编特地总结了让元素居中的方法。 showImg(https://segmentfault.com/img/b...

douzifly 2019-08-29 17:17 评论0 收藏0
css对齐方案总结

摘要：核心代码利用布局利用布局，其中用于设置或检索弹性盒子元素在主轴横轴方向上的对齐方式而属性定义子项在容器的当前行的侧轴纵轴方向上的对齐方式。核心代码相对于的水平垂直居中列表布局兼容性好核心代码布局核心代码css对齐方案总结垂直居中通用布局方式(内敛元素和块状元素都适用) 利用flex:核心代码: 12345 .container{ display:flex; ...

marek 2019-04-23 11:45 评论0 收藏0