CSS布局指南：居中相关的布局

2020-04-1421:06:53网页制作Comments1,368 views字数 3154阅读模式

1.1 水平居中布局

效果图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

方案一. `inline-block` + `text-align`

分析：display设置为inline-block的元素，具有文本元素的性质，其父元素可以通过设置文本对齐属性text-align来控制其在行内的对齐方式，text-align: center即为水平对齐文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

注意：text-align属性是具有继承性的，会导致自己元素内部的文本也是居中显示的，需要自身设置text-align覆盖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
        text-align: center;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: inline-block;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

方案二. 定位 + `transform`

分析：父元素开启定位（relative，absolute,fixed都可以）后，子元素设置绝对定位absolute后，left设置为50%，再使用transform: translateX(-50%)将子元素往反方向移动自身宽度的50%，便完成水平居中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

注意：父级元素是否脱离文档流，不影响子元素水平居中效果，但是transform是css3属性，存在浏览器兼容问题文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

<style>
    .wrap {
        position: relative;
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

方案三. `display: block` + `margin: 0 auto`

分析：这个方法只需要对子元素进行设置就可以实现水平居中，margin设置auto表示浏览器会自动分配，实现来外边距等分效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

注意：这里子元素设置display为block或者table都是可以的，如果子元素脱离文档流（浮动，定位），会导致margin属性的值无效。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

<style>
    .wrap {
        width: 100%;
        height: 200px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        display: table;
        margin: 0 auto;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

1.2 垂直居中布局

效果图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

方案一. 定位 + `transform`

这种方案和之前水平居中布局的方案二是同样的原理，不在赘述文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

<style>
    .wrap {
        position: relative;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

方案二. `display: table-cell` + `vertical-align`

分析：设置display: table-cell的元素具有td元素的行为，它的子元素布局方式类似文本元素，可以在父元素使用vertical-align: middle;实现子元素的垂直居中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

注意：vertical-align属性具有继承性，导致父元素内文本也是垂直居中显示的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 200px;
        height: 600px;
        background-color: aqua;
    }
    .content {
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

1.3 水平垂直居中布局

效果图如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

前面分别总结了一些水平居中和垂直居中的布局方式，那么进行水平垂直居中的布局，也就没什么特别要说的了，直接上代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

方案一.定位 + `transform`

<style>
    .wrap {
        position: relative;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

方案二. 结合水平布局方案三，垂直布局方案二

<style>
    .wrap {
        display: table-cell;
        vertical-align: middle;
        width: 1200px;
        height: 800px;
        background-color: aqua;
    }
    .content {
        margin: 0 auto;
        width: 200px;
        height: 200px;
        background-color: blueviolet;
    }
</style>
<body>
    <div class="wrap">
        <div class="content"></div>
    </div>
</body>
复制代码

1.4 使用`flex`进行居中布局

分析：使用flex，水平垂直居中会变得非常容易，默认情况下，align-items: center垂直居中（交叉轴排列方式），justify-content: center水平居中（主轴排列方式）注意：需要考虑浏览器兼容性问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

 <style>
     .wrap {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 1200px;
         height: 800px;
         background-color: aqua;
     }
     .content {
         width: 200px;
         height: 200px;
         background-color: blueviolet;
     }
 </style>
 <body>
     <div class="wrap">
         <div class="content"></div>
     </div>
 </body>

作者：catboy
链接：https://juejin.im/post/5e91a8a56fb9a03c9037928f
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/18137.html