CSS3几种实现子容器水平垂直居中的方法
前言
本文主要讲解有几种方法可以实现容器与子容器水平垂直居中,这些方法的使用方式。那么好,本文正式开始。
子容器
Flexbox 布局
<div style="display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px;"> <div>1</div> </div>
在上述代码中我们实现了垂直水平居中布局,用到的是FlexBox,先用display:flex把这个div变成一个Flex容器,用justify-content:center用于在主轴(默认水平)上居中对齐,用align-items:center在侧轴(默认垂直)上居中对齐。实现了一个子容器的水平居中对齐。
position绝对定位+transform
<div style="position: relative;width:100px;height:100px;border:1px solid gray;"> <div style="position: absolute;top:50%;left:50%;transform: translate(-50%, -50%)">1</div> </div>
在上述代码中我们用position+transform实现了垂直水平居中,那么好,我们开始讲解。
首先在父容器中,设置relative相对定位,以便子容器实现绝对定位,否则它将定位到整个页面为父元素、然后在子容器中设置绝对定位,使其脱离正常文档流,定位到relative最近的那个div并且设置它的top和left,将容器的顶部和左侧定位到父容器中心,最后使用transform函数,将内部div沿着自身宽高的一般向左上移动这样则可以保证元素完全居中。
注:top和left的50%只是让子元素处在父容器的中心位置,而不会保证完全剧中,只有添加transform函数才会让元素根据自身尺寸想左上移动,前者是父容器的中心点,后者是元素本身中心点。
表格布局
<div style="display: table; width:100px;height:100px;border:1px solid gray;"> <div style="display: table-cell;vertical-align: middle;text-align: center ">1</div> </div>
table表格布局是一种传统布局,通过在父容器中设置display:table,使其成为一个包含单元格的表格容器,在子容器中设置为表格单元格,并且用vertival-alige和text-align分别垂直和水平居中。
缺点
Flex布局缺点:旧版浏览器对flexbox支持不完全,可能需要兼容性处理。
绝对定位+transform变换缺点:不适合响应式布局:绝对定为在固定尺寸容器实现,因此不能适应不同屏幕尺寸和设备的布局要求。
对文档流的影响:使用绝对定位可以使元素脱离正常文档流,这可能导致其他元素的布局受到影响。
CSS表格布局缺点:缺乏灵活性:使用表格布局时,难以轻松地对元素进行自适应调整,并且在处理复杂布局需求时可能存在一些限制。
响应式布局的挑战:由于表格布局通常是基于固定的行和列,它可能不太适合实现响应式布局,即在不同设备和屏幕尺寸上调整布局。
到此这篇关于CSS3几种实现子容器水平垂直居中的方法的文章就介绍到这了,更多相关CSS3 子容器水平垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章
- 这篇文章主要介绍了使用CSS实现水平垂直居中效果的方法的总结,涵盖了从最原始的高度设置到令人兴奋的CSS3的Flexbox方式,非常全面,十分推荐!需要的朋友可以参考下2016-03-10
- 这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局,有需要的可以参考2016-09-12
- 在前端面试中经常会遇到css居中效果的实现,今天小编给大家分享几种css垂直水平居中的方法,通过实例代码给大家讲解,需要的朋友参考下吧2020-02-27
- 这篇文章主要介绍了CSS3 不定高宽垂直水平居中的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起2020-03-26
- 这篇文章主要介绍了css3 flex实现div内容水平垂直居中的几种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小2020-03-27
最新评论