css中有哪些方法可以实现垂直居中_css教程,css,垂直居中
作者:搜教程发布时间:2020-03-23分类:CSS教程浏览:16评论:0
详解css行内样式、内嵌样式与外部引用样式的使用方法_css教程
本文为大家介绍了css行内样式、内嵌样式与外部引用样式的使用方法,具有一定的参考价值,希望可以帮助到大家。行内样式:【
】。
css实现垂直居中的方法如下:
1、利用line-height实现居中,这种方法适合纯文字类的;
<!-- css --> <style> .parents { height: 400px; line-height: 400px; width: 400px; border: 1px solid red; text-align: center; } .child { background-color: blue; color: #fff; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
效果:
(推荐教程:CSS教程)
2、通过设置父容器相对定位,子级设置绝对定位,标签通过margin实现自适应居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: blue; /* 四个方向设置为0, 然后通过margin为auto自适应居中 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
效果:
3、弹性布局flex 父级设置display: flex; 子级设置margin为auto实现自适应居中;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #333; background-color: yellow; margin: auto; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
效果:
css如何实现一个自适应容器_css教程
本文来自CSS入门教程栏目,文中为大家介绍了css实现一个宽高等比自适应容器的方法,具有一定的参考价值,希望可以帮助到大家。我们可以通过vw视口单位来实现。
4、父级设置相对定位,子级设置绝对定位,并且通过位移transform实现;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; position: relative; } .child { width: 200px; height: 100px; line-height: 100px; text-align: center; color: #fff; background-color: green; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child">css布局,实现垂直居中</span> </div> </body>
效果:
5、父级设置弹性盒子,并设置弹性盒子相关属性;
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: flex; justify-content: center; /* 水平 */ align-items: center; /* 垂直 */ } .child { width: 200px; height: 100px; color: black; background-color: orange; } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
效果:
6、网格布局,父级通过转换成表格形式,然后子级设置行内或行内块实现。(需要注意的是:vertical-align: middle使用的前提条件是内联元素以及display值为table-cell的元素)。
效果:
<!-- css --> <style> .parents { height: 400px; width: 400px; border: 1px solid red; display: table-cell; text-align: center; vertical-align: middle; } .child { width: 200px; height: 100px; color: #fff; background-color: blue; display: inline-block; /* 子元素设置行内或行内块 */ } </style> </head> <body> <!-- html --> <div class="parents"> <span class="child"></span> </div> </body>
相关视频教程推荐:css视频教程
以上就是css中有哪些方法可以实现垂直居中的详细内容,更多请关注ki4网其它相关文章!
css如何实现开关效果_css教程
本文为大家介绍了css实现开关效果的方法,具有一定的参考价值,希望可以帮助到大家。可以使用标签来实现此效果。
相关推荐
- 手把手教你CSS如何实现毛玻璃效果_html5教程,css
- css优化策略介绍_html5教程,css,优化策略
- 两分钟带你了解在CSS中三种使图片居中的方法_html5教程,css,图片居中
- 手把手教你CSS如何实现毛玻璃效果_css教程,css
- css优化策略介绍_css教程,css,优化策略
- 两分钟带你了解在CSS中三种使图片居中的方法_css教程,css,图片居中
- css中标签嵌套规则有哪些_html5教程,css,标签,嵌套规则
- CSS3如何实现图片滚动播放效果(附代码)_html5教程,css
- css中标签嵌套规则有哪些_css教程,css,标签,嵌套规则
- CSS3如何实现图片滚动播放效果(附代码)_css教程,css
你 发表评论:
欢迎- CSS教程排行
-
- 1css实现文字过长显示省略号_css教程,css,省略号
- 2css如何实现下划线滑动效果_css教程,css,下划线
- 3css如何修改默认滚动条样式_css教程,css,滚动条
- 4css如何实现给div添加滚动并隐藏滚动条_css教程,css,div,滚动条
- 5css如何控制网页背景颜色_css教程,css,背景颜色
- 6css如何实现边框长度控制功能_css教程,css,边框
- 7详谈CSS的flex布局(图文介绍)_css教程,css,flex布局
- 8css中的content属性该如何使用_css教程,css,content
- 9伪元素“::after”和“::before”的作用分别是什么_css教程,伪元素,::after,::before
- 最新文章
- 广而告之