在 div 中居中垂直文本

Question

我有一个两列布局，两列高度相等。我使用 flexbox 使它们具有相同的高度。

左栏应包含垂直文本，然后应沿该栏的整个高度居中

HTML 看起来像这样

<div class="month">
  <div class="name"><div>Jan</div></div>
    <div class="days">
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>
       <div class="day">123</div>      
     </div>
  </div>

这是 CSS

div.month {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
}
div.name {
  border: 1px solid red;
  width: 20px;
  position: relative;
}
div.name  div {
  transform: rotate(90deg);
  transform-origin: left top 0;
  margin-left: 20px;
  width: 100%;
  text-align: center;
}

div.days {
  width: 100%;
  margin-left: 20px;

div.day {
  border: 1px solid black;
}

这是一个例子 http://jsfiddle.net/o6xv824u/

我不知道如何将 div.month

中的文本居中

有什么想法吗？

Answer 1

您可以使用绝对位置然后翻译。

http://jsfiddle.net/o6xv824u/1/

position:absolute; top:50%; left:50%;

transform: translate (-50%,-50%);

Answer 2

如果要垂直居中对齐，可以使用绝对位置，"margin-top" 和 "top" css 属性。

我也对您的 css 代码进行了一些更改。看看 working fiddle.

CSS :

div.name  div {
      transform: rotate(90deg);
      transform-origin: center center;   // rotate the text from center origin  
      width: 100%;
      position: absolute;
      top: 50%;
      margin-top: -50%; // to make it align vertically center
}

在 div 中居中垂直文本

Centering vertical text in a div

css

centering