垂直对齐div中的列表项

Question

我一直试图将这个钉牢多年，但似乎无法弄明白。我只需要在每个<ul>的中心水平和垂直对齐文本，但它不会发生。 JSFiddle

我哪里错了？

＆＃13;

＆＃13;

#HomeRight {
  position: absolute;
  width: 120px;
  top: 120px;
  bottom: 100px;
  right: 0;
}

#HomeRight ul {
  margin: 0;
  padding: 0;
  height: 100%;	
  display: table;
} 

#HomeRight li {
  display:table-cell;
  float:left;
  width:120px;
  height:25%;
  text-align:center;
  vertical-align:middle;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid transparent;
  background-clip: padding-box;
} 

＆＃13;

<div id="HomeRight">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

也许flex会比表更好的解决方案

#HomeRight ul {
width:100%;
height: 100%;   
display: flex;
align-items:center;
justify-content:center;
} 

jsfiddle example

Answer 2

尝试使用此代码可能会对您有所帮助。

＆＃13;

＆＃13;

#HomeRight {
  position: absolute;
  width: 120px;
  top: 120px;
  bottom: 100px;
  right: 0;
}

#HomeRight ul {
  margin: 0;
  padding: 0;
  height: 100%;	
  display: table;
} 

#HomeRight li {
  display:table-cell;
  float:left;
  width:120px;
  height:25%;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid transparent;
  background-clip: padding-box;
  display: flex;
} 

＆＃13;

<div id="HomeRight">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

driver.findElement(By.cssSelector("a[id*='ProgramWizardBase_ctl00_HomePageHyperLink']")).click();

#HomeRight {
position: absolute;
  width: 120px;
top: 120px;
right: 0;
}
#HomeRight ul {
margin: 0;
padding: 0;
height: 100%;
} 
#HomeRight li {
  list-style: none;
width:120px;
height:25%;
text-align:center;
background-color: rgba(0, 0, 0, 0.4);
border: 1px solid transparent;
background-clip: padding-box;
}
#HomeRight li:before {
content: '';
display: inline-block;
width: 1px;
vertical-align: middle;
height: 100%;
}

https://jsfiddle.net/afelixj/ds827wnd/3/