用css固定标签位置,css固定宽高和位置内部元素布局

前言

说不上什么小技巧吧，之前用过，发现这个布局对于单行元素来说，没有什么问题，因为我的需求就是单行元素，不换行来说的。类似这样的需求，位置和宽高固定，元素在固定宽高的位置里面的垂直方向的布局和水平方向的布局方式。

如下图：

高亮区域就是我想要展示的文字区域，假设有主标题，副标题，主标题(高亮区域)的位置是固定的，宽高是固定的，但是里面的文案要求可以在水平方向左中右对齐，垂直方向上中下对齐，这种布局如何实现呢？

css3的方式

因此我们很快想到了

justify-content:center;//子元素水平居中

align-items:center;//子元素垂直居中

但是我高亮部分用flex布局直接用上面样式的话，肯定是无效的，因为高亮部分里面就是文字，上面的代码仅仅对固定宽高块级子元素有用，文字是无效的。

css lineHeight方式

除了我之前介绍的固定宽高内部元素垂直居中的方式之外，我今天再介绍一种方式给大家，是一个公式，很管用。

水平方向我们上图高亮部分布局用textAlign就可以，很简单，关键是垂直方向的布局。下面介绍一下这个公式：

固定宽高和位置垂直居上用lineHeight的写法：

line-height=高亮部分文字的fontSize

垂直居中

line-height =高亮部分的高度 //这个很简单，我们经常用

垂直居低

line-height = 高亮部分的高度*2 - 高亮部分文字的fontSize

注：这种方式仅仅是对一行元素的上中下布局，多行就有问题了。

说到line-height，我这里想到了一个题目，就是line-height带单位和不带单位是什么区别呢？请看我之前的文章。