css居中代码是什么?

css居中代码是什么?下面本篇文章给大家总结一些CSS居中的方式。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

CSS居中的方式

1、内联元素水平居中

1.jpg

2、块级元素水平居中

2.jpg

3、多块级元素水平居中(利用inline-block)

3.jpg

4、多块级元素水平居中(利用display: flex)

4.jpg

5、垂直居中(单行内联(line-height)元素垂直居中)

5.jpg

6、垂直居中(多行元素垂直居中利用表布局(table vertical-align: middle))

6.jpg

7、垂直居中(多行元素垂直居中利用flex布局(flex-direction: column))

7.jpg

8、伪元素—利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的

8.jpg

9、块级元素垂直居中(固定高度的块级元素)

9.jpg

10、块级元素垂直居中(未知高度的块级元素)

10.jpg

11、水平垂直居中(固定宽高元素水平垂直居中)

11.jpg

12、水平垂直居中(未知宽高元素水平垂直居中)

12.jpg

13、水平垂直居中(利用flex布局)

13.jpg

14、水平垂直居中(利用grid布局)

14.jpg

15、水平垂直居中(屏幕上水平垂直居中)

15.jpg

更多web前端知识,请查阅 HTML中文网 !!

以上就是css居中代码是什么?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏