css固定寬高和位置內部元素佈局

摘要： 前言 說不上什麼小技巧吧，之前用過，發現這個佈局對於單行元素來說，沒有什麼問題，因為我的需求就是單行元素，不換行來說的。類似這樣的需求，位置和寬高固定，元素在固定寬高的位置裡面的垂直方向的佈局和水平方向的佈局方式。 如下圖： 高亮區域就是我想要展示的文字區域，假設有主標題...

前言

說不上什麼小技巧吧，之前用過，發現這個佈局對於單行元素來說，沒有什麼問題，因為我的需求就是單行元素，不換行來說的。類似這樣的需求，位置和寬高固定，元素在固定寬高的位置裡面的垂直方向的佈局和水平方向的佈局方式。

如下圖：

高亮區域就是我想要展示的文字區域，假設有主標題，副標題，主標題（高亮區域）的位置是固定的，寬高是固定的，但是裡面的文案要求可以在水平方向左中右對齊，垂直方向上中下對齊，這種佈局如何實現呢？

css3的方式

關於佈局方式，我之前有文章總結過，請看： https://www.haorooms.com/post/css_div_juzhong

因此我們很快想到了

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中

但是我高亮部分用flex佈局直接用上面樣式的話，肯定是無效的，因為高亮部分裡面就是文字，上面的程式碼僅僅對固定寬高塊級子元素有用，文字是無效的。

因為我高亮部分的文字長度有且僅有一行。因此我們可以用我之前的方式來寫。請看我之前的文章： https://www.haorooms.com/post/div_guding_inner_center

css lineHeight方式

除了我之前介紹的固定寬高內部元素垂直居中的方式之外，我今天再介紹一種方式給大家，是一個公式，很管用。

水平方向我們上圖高亮部分佈局用textAlign就可以，很簡單，關鍵是垂直方向的佈局。下面介紹一下這個公式：

固定寬高和位置垂直居上用lineHeight的寫法：

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

垂直居中

line-height =高亮部分的高度 //這個很簡單，我們經常用

垂直居低

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

注：這種方式僅僅是對一行元素的上中下佈局，多行就有問題了。

說到line-height，我這裡想到了一個題目，就是 line-height帶單位和不帶單位是什麼區別 呢？請看我之前的文章。