块级元素,行内元素,多行行内元素的水平垂直居中,在link中使用媒体查询

158 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第决12天

1, 使用弹性盒模型的方式

image.png

2,使用绝对定位配合margin的方式

image.png

要注意的是使用绝对定位时,要给父级元素添加一个相对定位的属性,其次margin的值是负值,margin-left是div宽度width的一半,margin-top是div高度height的一半。

3,使用css3变形的方式

image.png

4,在不能使用css3变形和flex布局的情况下

image.png

行内元素的水平居中(单行)

text-align: center可以看做是x轴的水平居中 line-height:可以看做是y轴的垂直居中 image.png

行内元素的水平居中(多行)

image.png

在link中使用媒体查询

当我们的使用环境,不同的频幕需要不同的样式,css需要很多的情况下可以使用它

image.png

image.png

image.png

image.png