常见CSS操作 BFC 垂直居中水平居中

最新推荐文章于 2021-11-12 21:01:21 发布

Twelve--

最新推荐文章于 2021-11-12 21:01:21 发布

阅读量183

点赞数

分类专栏：日常开发问题 CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_43883485/article/details/106418262

版权

日常开发问题同时被 2 个专栏收录

43 篇文章 2 订阅

订阅专栏

CSS

24 篇文章 2 订阅

订阅专栏

常见创建 BFC 的方式

1. position:absolute fixed
2. float 不是none
3. overflow 不是 visible
4. display inline-block或者flex
5. 根元素 <html>
等等...

垂直居中

1. padding // 父元素不能设置固定高度
2. line-height // 不适用多行文本
3. display:flex;
   flex-direction:column;
   justify-conent:center  // ie9以上才兼容
4. 父元素--display:table; // 适合表格
   子元素--display:table-cell;vertical-align:middle
5. display:grid; // 兼容性 
   grid-template-columns:repeat(6,1fr);
   align-item:center;
   justify-conent:center;
6. 父元素--position:relative; // 脱离了文档流
   子元素--position:absolute;top:50%;transform:translateY(-50%)
7. display:inline-block;vertical-align:middle;
   xx:after{ // 需要创建一个伪元素 
    content:"";
    display:inline-block;
    height:100%;
    width:0;
    vertical-align:middle;
   }

水平居中元素

text-align:center; // 普通 
margin:0 auto; // 块级元素 
position:relative; // 元素要有宽度
transform:translateX(-50%); // 需要考虑兼容性
position:absolute;left:0;right:0;margin:0 auto;

Twelve--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见CSS操作 BFC 垂直居中水平居中

常见创建 BFC 的方式1. position:absolute fixed2. float 不是none3. overflow 不是 visible4. display inline-block或者flex5. 根元素 <html>等等...垂直居中1. padding // 父元素不能设置固定高度2. line-height // 不适用多行文本3. display:flex; flex-direction:column; justify-conent:ce
复制链接

扫一扫