CSS水平垂直居中总结

2024年2月8日 208次阅读 来源: yuqy

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属性，也很神奇，可以好好再拜读下大神的文章。

    原文作者：yuqy
    原文地址: https://segmentfault.com/a/1190000007765664
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞