如何水平和垂直居中元素 - How to center an element horizontally and vertically

問題：

I am trying to center my tabs content vertically, but when I add the CSS style display:inline-flex , the horizontal text-align disappears.我試圖將選項卡內容垂直居中，但是當我添加 CSS 樣式display:inline-flex ，水平文本對齊消失了。

How can I make both text alignments x and y for each of my tabs?如何爲我的每個選項卡同時進行文本對齊 x 和 y？

* { box-sizing: border-box; } #leftFrame { background-color: green; position: absolute; left: 0; right: 60%; top: 0; bottom: 0; } #leftFrame #tabs { background-color: red; position: absolute; top: 0; left: 0; right: 0; height: 25%; } #leftFrame #tabs div { border: 2px solid black; position: static; float: left; width: 50%; height: 100%; text-align: center; display: inline-flex; align-items: center; }

<div id=leftFrame> <div id=tabs> <div>first</div> <div>second</div> </div> </div>

---

解決方案：

參考一： https://stackoom.com/question/1JepV
參考二： How to center an element horizontally and vertically