CSS3新增的伪类有哪些 与 居中div的多种方法

CSS3新增伪类有那些？

• p:first-of-type:选择属于其父元素的首个<p>元素
• p:last-of-type:选择属于其父元素的最后<p>元素
• p:only-of-type:属于父元素的特定类型的唯一子元素
• p:only-child:属于父元素的唯一子元素的每个<p>元素
• p:nth-child(2):选择父元素的第二个子元素
• ::after 在元素之前添加内容
• ::before 在元素之后添加内容
• :enabled 已启用
• :disabled 控制表单为禁用状态，不可点击
• :checked 单选框或复选框被选中

如何居中div

第一种方式：给div设置一个宽度，然后添加margin:0 auto属性.

div{
  width:200px;
  margin:0 auto;
}

第二种方式：让绝对定位的div居中

div{
  position:absolute;
  width:300px;
  height:300px;
  margin:auto;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background-color:pink;
}

第三种方式：水平垂直居中一

div{
  position:absolute;
  width:500px;
  height:300px;
  top:50%;
  left:50%;
  margin:0 0 0 -250px;
  background-color:pink;
}

第四种方式：未知容器的宽高，利用'transform'属性

div{
  position:absolute;
  width:500px;
  height:300px;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%)
  background-color:pink;
}

第五种方式：利用flex布局，需考虑兼容性

container{
  display:flex;
  align-item:center;/*垂直居中*/
  justify-content:center;/*水平居中*/
}
container div{
  width:100px;
  height:100px;
  background-color:pink
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2263