css样式-内容居中-奇偶行

1、内容水平垂直居中

1.line-height，text-align:center,不适用多重嵌套，维护修改慢

div{
     line-height: 32px;
     text-aligin: center
}

2.容器有宽高，display:flex, flex - CSS（层叠样式表） | MDN

div {
  display: flex;
 //上下居中
  align-items: center;
 //左右居中
  justify-content:center
 //内容均分，距离容器左右有边界
 //justify-content: space-around;
 //内容均分，距离容器左右无边界
 // justify-content: space-between;
}

3.绝对定位

<div class="father">
    <div class="son">我是块级元素</div>
</div>

<style>
.father{
    width:100px;
    height:40px;
    position:relative;
}
.son{
    margin:auto;
    left:0;
    right:0;
    top:0;
    bottom:0
    position:absolute;
}
</style>

2. 奇偶

<div class="container">
            <ul class="father">
                <li class="son">1</li>
                <li class="son">2</li>
                <li class="son">3</li>
                <li class="son">4</li>
                <li class="son">5</li>
            </ul>
</div>

1.CSS3 :nth-child() 选择器

<style>
      
//偶数
.son:nth-child(2n){
    background:#ff0000;
}
</style>

<style>
      
//奇数
.son:nth-child(odd)
{
background:#ff0000;
}
//偶数
.son:nth-child(even)
{
background:#0000ff;
}
//最后两个
.son:nth-last-of-type(-n+2) {
  margin-bottom: 0;
}
</style>

2.js判断奇偶

var num = prompt('请输入一个数：');
if (num % 2 == 0) {
    alert('偶数');
} else if (num % 2 == 1) {
    alert('奇数');
} else {
    alert('错误');
}