Q: how to align text in center of the div of vertical align text 

/* Styles go here */

.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="floatsidebar">
    <div class="sidebarmain ui-widget-header">
      <div class="vertical-text">hello</div>
    </div>
  </div>
</body>

</html>


What I am trying to do is to align the hello text in the middle of the div
but no success.
How to align the text in center of its parent div?
<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text">hello</div>
  </div>
</div>


A: Change your transform to 50% instead of 100% and add a span that can be moved back half it's own width


/* Styles go here */


.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 50%) rotate(-90deg);  /* change this */
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.vertical-text > span {                        /* add a span for true centring */
  transform: translateX(-50%);
  display: inline-block;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  padding: 0 0.5em;
  box-sizing:border-box;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}
<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text"><span>a brown fox quick jump over the lazy dog a brown fox quick jump over the lazy dog</span></div>
  </div>
</div>



A: Simply use flexbox
.sidebarmain {
    display: flex;
    justify-content: center;
    align-items: center;
}

