CSS中BFC、水平居中、垂直居中方法总结

最新推荐文章于 2022-04-21 14:00:00 发布

八百比晴明

最新推荐文章于 2022-04-21 14:00:00 发布

阅读量532

点赞数

分类专栏：笔记文章标签： css html css3

本文链接：https://blog.csdn.net/m0_51981718/article/details/121295900

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

BFC

块格式化上下文（block formatting context），是web页面的可视化渲染出来的一部分。形成了BFC就形成了一个独立的区域，区域里面的元素不会影响到外边。

形成BFC的方法：

浮动元素：float不是none的元素。
绝对定位的元素：postion的值为absolute或fixed。
内联块元素：display:inline-block
overflow的值不是visible的块元素
display的值为flow-root的时候。（CSS3中新增加的）

1、2、3、4都可以形成BFC来解决一些问题但是需要加上自己的特性。所以为了单纯的触发bfc所以加入了flow-root。

形成BFC之后用来干什么：

爸爸管儿子，让爸爸能够包裹住儿子（爸爸抱抱）

解决float高度塌陷问题

<!DOCTYPE html>
<html>

<head>
    <!-- <link href="./normalize.css" rel="stylesheet" />
    <link rel="stylesheet" href="./appleHeader/iconfont.css"> -->
    <style>
        #f{
            /* overflow:hidden; */
            /* position:absolute; */
            display: flow-root;
            border:1px solid green;
        }
        #z{
            width:100px;
            height:100px;
            border:1px solid blue;
            float:left;
        }
    </style>
</head>

<body>
    <div id="f">
        <div id="z"></div>
    </div>
</body>

</html>

解决父子间margin合并问题

<!DOCTYPE html>
<html>

<head>
    <!-- <link href="./normalize.css" rel="stylesheet" />
    <link rel="stylesheet" href="./appleHeader/iconfont.css"> -->
    <style>
        #f{
            background-color:yellow;
            /* border:1px solid green; */
            /* padding:1px; */
            /* display:flow-root; */
            overflow: hidden;
        }

    </style>
</head>

<body>
    <div id="f">
        <h1>hello world!</h1>
    </div>
</body>

</html>

兄弟之间划清界限（亲兄弟明算账）

float块状元素重叠，行内元素不重叠。

<!DOCTYPE html>
<html>

<head>

    <style>
        img{
            float:left;
        }
        #f div{
            display:flow-root;
        }
    </style>
</head>

<body>
    <div id="f">
        <img src="./820f0866837299dd6df922b302e2129b.jpg" />
        <div>123456</div>
    </div>
</body>

</html>

水平、垂直居中的方法

水平居中
1. 让块状元素、行内块状元素中的行内元素或行内块状元素水平居中（父元素上加）
  
  text-align:center
2. 块状元素水平居中（子元素上加）
  
  margin-left和margin-right都为auto。
3. position配合margin
```
position:absolute;
left:50%;
margin-left:-自身宽度的一半
```
4. position配合transform:translatex
```
position:absolute;
left:50%;
transform:translatex(-50%);
```
5. 弹性盒子
```
display:flex;
justify-content:center;
```

垂直居中

单行文本垂直居中

line-height=height

图片垂直居中

1. 父元素line-height=height;
2. 子元素设置vertical-align:middle;

多行文本垂直居中

1. 父元素line-height=height;
2. 子元素display:inline-block
3. 子元素的line-height:normal;
4. vertical-align:middle;

table-cell方式

display:table-cell;
vertical-align:middle;

<!DOCTYPE html>
<html>

<head>

    <style>
        #f{
            /* 1. 将div的显示方式改为表格的单元格 */
            display:table-cell;
            /* 2. 只要是表格的单元格就可以直接使用vertical-align */
            vertical-align: middle;
            width:500px;
            height:500px;
            border:1px solid green;
        }
        
    </style>
</head>

<body>
    <div id="f">
        <img src="./820f0866837299dd6df922b302e2129b.jpg" style="width:100px;" />
    </div>
</body>

</html>

position配合margin

1. position:absolute;
2. top:50%;
3. margin-top:-自身高度的一半

position配合transform:translatey

1. position:absolute;
2. top:50%;
3. transform:translatey(-50%);

弹性盒子

1. display:flex;
2. align-items:center;或align-content:center（flex-wrap:wrap;）

八百比晴明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录