html + css 居中方法大全

最新推荐文章于 2024-04-12 11:37:26 发布

小木兮子

最新推荐文章于 2024-04-12 11:37:26 发布

阅读量3.9k

点赞数 2

分类专栏： html5 + css 文章标签： css3 css 布局源码

本文链接：https://blog.csdn.net/zhang_referee/article/details/78562767

版权

html5 + css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css居中

水平居中：

说到水平居中，最简单的方法就是margin：0 auto;

也就是将margin-left 和 margin-right属性设置为auto;
源码和效果如下图所示:

这里写图片描述

ps:不要想当然的以为简单地将margin值设置为auto，就可以将元素水平、垂直居中（不过在css3弹性布局中确实可以这样子做，这里暂不做过多讨论）；

文本的居中对齐方式：
这里写图片描述

ps:文本垂直对齐一般上设置line-height和height 相等的值就可以!

padding填充

利用padding和background-clip配合实现div的水平垂直居中：

通过backgroun-clip设置为content-box,将背景裁剪到内容区外沿，再利用padding设为外div减去内div的差的一半，来实现：

这里写图片描述

盒子模型

这里写图片描述

绝对定位居中

这里写图片描述

盒模型

这里写图片描述

盒模型
这里写图片描述

调整尺寸

resize 属性可以让尺寸可调。设置 min- /max- 限制尺寸，确定加了 overflow: auto

这里写图片描述

盒模型

margin填充（主要给父元素设置overflow来触发父元素的BFC）

这里写图片描述

对应的盒模型

列表内容

这里写图片描述

absolute定位+margin填充

这里写图片描述

对应的盒模型
这里写图片描述

总结：*此方法就是利用定位，将子元素设置top和left 均为 50%,然后margin-top 和
margin-left设为负的本身盒子的高和宽的一半，即可实现水平垂直居中！*

transform居中

上面讲到的div居中的例子中，div的宽度都是固定的，然而实际项目中，有可能遇到不定宽的div，特别是响应式或者移动端的设计中，更加常见。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .parent{
            float:left;
            width:100%;
            height:200px;
            background-color:red;
        }

        .children{
            float:left;
            position:relative;
            top:50%;
            left:50%;

        }

        .children-inline{
            position:relative;
            left:-50%;
            -webkit-transform:translate(0,-50%,0);
            transform:translate(0,-50%,0);
            background-color:#ccc;
            color:#fff;
        }
    </style>
</head>
<body>
    <div class="parent">
      <div class="children">
        <div class="children-inline">我是水平垂直居中噢！</div>
      </div>
    </div>

</body>
</html>

这里写图片描述

*首先我们利用float，将需要居中的div的父div也就是children的宽度收缩，然后left:50%,将children的左边与水平中线对齐。这个时候，还没有真正居中，我们需要将children-inner左移动-50%，这样就水平居中了。再来说说垂直方向，先将children的top设为50%，然后其上边和垂直中线对齐了，同样，我们需要将children-inner上移动-50%。但是这个50%是计算不出来的，所以我们用到了transform
translate3d(0, -50%, 0); 这个方法非常好用噢。 *

flex居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        html,body{
            width:100%;
            height:200px;
        }

        .parent{
            display:flex;
            align-items:center;//垂直居中
            justify-content:center;
            width:100%;
            height:100%;
            background-color:red;
        }

        .children{
            background-color:blue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="children">flex水平垂直居中的</div>
    </div>
</body>
</html>