当前位置： 首页 > Web前端 > CSS

CSS水平居中

时间：2023-03-30 19:12:12 CSS

零散的知识不整理到自己的知识框架中，太容易忘记了。对于CSS，散落在你的脑海里！整理好自己！水平居中块级元素水平居中margin:auto这种居中方式的前提是必须先固定块级元素居中的宽度，然后才能设置auto自动计算左右padding.block1{height:300px;宽度：600px；背景：黑色；}.block2{高度：100px；宽度：100px；保证金：自动；背景：红色；}

可见block2的margin-left，margin-right设置为auto实现水平居中，但是设置margin-top和margin-bottomtoauto不允许垂直居中！特点：浏览器兼容性强，但扩展性差，无法适配未知项目。text-align:centertext-align属性指定元素中文本的水平对齐方式！显然不是用来水平居中块级元素的，但是当块级元素设置为内联块级元素时可以实现水平居中。block1{高度：300px；宽度：600px；背景：黑色；文本对齐：居中；}.block2{高度：100px；显示：内联块；背景：红色；}11111111111
特点：扩展性强，但是需要额外处理inline-block的浏览器兼容性。注意：该方法允许显示为inline/inline-block/inline-table/inline/flex值的子元素居中position:absolute通过设置子元素为绝对定位元素和left、margin-left的值，可以达到居中的效果。block1{高度：300px；宽度：600px；位置：相对；背景：黑色；}.block2{高度：100px；宽度：100px；位置：绝对；左：50%；左边距：-50px；">特点：必须知道子元素的宽度才能设置leftpadding的负值。注：网上有个说法，可以用float来实现居中可变宽度块级元素（暂未研究）CSS3flex实现水平居中方式Flex主要用于布局！Flex布局可以简单、完整、响应式地实现各种页面布局。稍后整理flex布局笔记！。block1{height:300px;width:600px;display:flex;justify-content:center;background:black;}.block2{height:100px;background:red;}1123123特点：实现方便，扩展性强但兼容性需要考虑CSS3width:fit-contentwidth:fit-content可以在保持原有块级状态的同时实现元素收缩效果，因此，你可以直接使用margin:auto实现元素向内自适应居中效果.block1{height:300px;宽度：600px；背景：黑色；}.block2{高度：100px；宽度：-webkit-fit-content；宽度：-moz-适合内容；宽度：适合内容；左边距：自动；右边距：自动；背景：红色；}1123123特点：扩展性强，但兼容性差；float浮动中心需要仔细研究！特点：兼容性强，扩展性强！但是实现原理比较复杂

CSS水平居中相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。