Question

考点

js语言和框架-CSS、CSS3-水平、垂直居中

面5笔5

请你说说设置水平居中，垂直居中，设置斑马线表格(纯css)

Answer 1

解答

水平居中

行内元素：父元素 text-align: center;

宽度固定： margin: 0 auto;

flex布局 justify-content: center

display: table-cell

垂直居中

单行文本 line-height 设置为 height 值

display: table-cell; + vertical-align: middle;

flex布局 align-items: center

absolute 定位 + transform: translateY(-50%, -50%)

斑马线表格

table{
  width: 90%;
  border-collapse: collapse; /*边框合并*/
}
tr.odd{
  background-color: #f6f6f6;
}
tr{
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: gray;
  height: 35px;
}
td{
  width: 35%;
  text-align: center;
}