属性和部分双向居中布局-CSDN博客

属性介绍

list-style-type:trad-chinese-formal，列表序号类型。list-style-position：inside，列表序号在里面会影响布局。
伪元素：div::before/after{content:''},content的特殊值值可以为:attr/count/string/open-quote/close-quote(引号的使用，可以给父元素设置一个quote属性里面的值可以对应)。

content：attr(href),attr是一个函数会生成，传入一个元素属性会生成出来属性的值。
content：couter（计数名称，类型）先给元素定义一个计数属性，然后生成出来div {counter-increment=div-count(自定义)} div::before{contetn:count(div-count)

垂直居中布局

行内元素：当需要居中的元素为行内元素,给父元素text-aligen:center；line-height：父元素高度。但是并不是真正的垂直居中，设置行高会根据字符框来设置的行高，会根据x的中间，会偏下。但是没有字符就是一个点，也就是最中间了。给父元素一个font-size为0；子元素还原,再对准行框的中间，vertical-align：middle。

div{width:200px;
    height:200px;
    border:1px solid;
    text-aligen:center；
    line-height:200px;
    font-size:0;
}
span{
    vertical-align：middle；
    font-size:16px;
}
    
复制代码

<div><span>xxx</span><div>
复制代码

不为行内元素：

就是类似行内元素，设置元素为inlin-block,吧div设置行高，span对齐这个行框的中间。可以不设置高度。(当子元素更大，可以通过设置margin为负值也也会居中)
定位来居中，通过让子元素定位在父元素上，通过绝对定位拉大自己重置margin来居中，也可以通过定位在中间left/top：50%，在让自己偏移transform：translate（-50%，-50%）。