水平和垂直居中的CSS技巧答案

【问题标题】：css trick for centering horizontal and vertical水平和垂直居中的CSS技巧
【发布时间】：2011-05-26 12:44:21
【问题描述】：

我的 .cent 类用于 <li> 元素。我想将<li> 的文本水平和垂直居中。 text-align:center; 负责水平居中，但垂直居中不起作用。这有什么 CSS 技巧？

.cent{
  height:20px;
  width:20px;
  text-align:center;
  vertical-align: middle;
}

【问题讨论】：

标签： css

【解决方案1】：

使用line-height 属性。

将其设置为元素的高度，文本将垂直居中。

.cent{
  height: 20px;
  width: 20px;
  text-align: center;
  /*vertical-align: middle;*/
  line-height: 20px;
}

【讨论】：

【解决方案2】：

它的父级是什么？

.parent {
   position: relative;   
}

.cent {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -10px;
   margin-top: -10px;
}

或者如果你想让vertical-align: middle 工作，设置display: table-cell。

【讨论】：

【解决方案3】：

尝试设置 li 标签的样式，margin 和 padding 标签会帮助你

喜欢，

# set default
li 
  {
  margin: 0;
  padding: 0;
  }

为你的class cent写好样式后，会正确影响li标签。

【讨论】：