css小技巧

合集 - css(1)

1.css小技巧2024-02-18

收起

水平居中

1. 单行文本的水平居中

text-align:center

2. 元素水平居中

2.1 块元素

一般都是在最外部套一个div（块元素），然后对这个div设置width即宽度，然后让其margin-left和margin-right的值为auto实现水平居中。

1.  写一个div包裹

2. 给div设置宽度

3. 给div的左右外边框的属性，设置为auto。一般margin:0 auto

 

2.2 行内元素（inline）以及复合行内元素（inline-*）

 如果需要水平居中的元素都是行内元素（如果一个块元素使用display:inline或inline-block就变成了行内元素了），则需要使用一个div元素包裹，然后对此div设置text-align:center实现包裹元素水平居中

 

 

垂直居中

1. 单行文本垂直居中

对该元素增加line-height、height属性并且其值一样。

2. 多行文本垂直居中(转化为行内块垂直居中的方式)

1. 使用span元素包裹

2. 使用div包裹span元素

3. 对span元素进行行内块转化：span{ display:inline-block}

4. 对div元素进行处理：div{ display:table-cell; vertical-align:middle}

 

3. 元素垂直居中

3.1 块元素

使用通用方法解决（适合行内、行内块、块元素）

要求：

1. 父元素必须有宽高属性

2. 子元素必须有宽高属性

3. 子绝父相

父元素{

position：relative

}

子元素{

position:absolute;

top:50%;

left:50%;

margin-top:"自己height值的一半的负值”

margin-left:“自己width值的一半的负值”

}

top:50%; left:50%;  让子元素相对父元素，左上角在父元素的中心

margin-top:"自己height值的一半的负值” margin-left:“自己width值的一半的负值” 让自己的中心与父的中心在一个点上

top:50%;  margin-top:"自己height值的一半的负值”         实现垂直居中

left:50%; margin-left:“自己width值的一半的负值”            实现水平居中

 

3.2 行内块的垂直居中

与“多行文本垂直居中(转化为行内块垂直居中的方式）”相似

1. 使用行内元素元素vertical-align:middle

2. 使用div包裹行内元素

3 对div元素进行处理：div{ display:table-cell; vertical-align:middle}