水平居中和垂直居中方法

最新推荐文章于 2023-02-13 18:22:12 发布

Vanghua

最新推荐文章于 2023-02-13 18:22:12 发布

阅读量4.2k

点赞数

分类专栏： CSS布局文章标签： css css3 html 布局

本文链接：https://blog.csdn.net/qq_37464878/article/details/122736388

版权

CSS布局专栏收录该内容

10 篇文章 1 订阅

订阅专栏

参考并稍作修改：
https://juejin.cn/post/6844903799446831117#heading-5
https://juejin.cn/post/6844903474879004680#heading-0
https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

1.水平居中

1.行内元素的水平居中

方法： 在行内元素的父元素上设置text-align: center;

2.块级元素的水平居中

方法： 在块级元素上设置margin: 0 atuo;

3.不定宽元素的水平居中

方法： 父元素设置width: fit-content; margin: 0 auto;，子元素和父元素其它属性任意设置。

说明： 不定宽元素不能直接使用margin: 0 auto;，会有冲突不会进行居中。使用width: auto; margin: 0 auto;也会有冲突，具体原因应该与margin的计算规则有关，网上并没有查到冲突原理。

补充： fit-content（参数）的规则是：min(maximum size, max(minimum size, argument))。maximum size是指当前元素的最大尺寸，如果尺寸确定那么就为当前尺寸，如果尺寸不确定为在父级元素上伸展的长度；minimum size是指当前元素的最小尺寸，如果尺寸确定就为当前尺寸，如果尺寸不确定为子元素的尺寸；argument指参数。

举例： 第一层div是容器，第二层div是父元素，第三层四个div是子元素。情景是父元素中有多个浮动布局子元素，最后一个子元素清除浮动解决高度塌陷，现在要使父元素在容器中水平居中布局。

<div style="width: 800px; height: 600px; border: 1px solid black;">
    <div id="father" style="background: blue; width: fit-content; margin: 0 auto;" id="father"> 
        <div style="width: 100px; height: 100px; background: green; float: left;"></div>
        <div style="width: 100px; height: 100px; background: pink; float: left;"></div>
        <div style="width: 100px; height: 100px; background: red; float: left;"></div>
        <div style="clear: both;"></div>
    </div>
</div>

4.flex水平居中(2012版本)

方法： 使用flex的最基本用法，在想水平居中的元素的父元素上设置display: flex; justify-content: center;

5.flex水平居中(2009版本)

方法： 用法类似2012版本的flex，但是注意浏览器兼容性，带上浏览器内核前缀webkit或moz，在父元素上设置 display: -webkit-box; -webkit-box-pack: center;

6.绝对定位和left，负的margin-left

方法： 在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; left: 50%; margin-left: 该元素宽度的一半再乘负一

7.绝对定位和left，right，margin

方法： 在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; left: 0; right: 0; margin: 0 auto;

说明： 这样的特殊用法也和margin的计算原理有关，在<<精通CSS>>这本书中也有更详细的介绍。

8.绝对定位和transform

方法： 在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; left: 50%; transform: translate(-50%, 0);

说明： transform涉及到集合变换，translate(-50%, 0)表示在x轴上向负方向平移50%的单位，单位是该元素的宽度。

2.垂直居中

1.行内元素的垂直居中

方法： 在行内元素上设置line-height: 父元素的高度

2.行内块元素的垂直居中

方法： 行内块元素统一设置vertical-align: middle，在其容器上再添加一个伪元素，设置为content: ""; display: inline-block; height: 100%; vertical-align: middle;

说明： 这种方法是如何得来的以及更详细的示例，在<<精通CSS>>一书中已经提到。大致意思是行内块元素的垂直居中需要vertical-align以外，还需要一个伪元素来撑起这个高度。

举例：

<head>
    <style>
        #container::after {
            content: "";
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }
    </style>
</head>
<div id="container" style="width: 400px; height: 400px;  border: 1px solid black;">
    <div style="display: inline-block; width: 100px; height: 100px; vertical-align: middle; background: green;"></div>
    <div style="display: inline-block; width: 100px; height: 100px; vertical-align: middle; background: red;"></div>
    <div style="display: inline-block; width: 100px; height: 100px; vertical-align: middle; background: blue;"></div>
</div>

3.不定高元素的垂直居中

方法： 不定高元素作为子元素，父元素设置display: table-cell; vertical-align: middle;，父元素外再设置一个容器元素，在上面设置display: table

举例：
最外层div是table容器，第二层div是父元素，第三层div是子元素。子元素是想要垂直居中的元素。

<div id="container" style="width: 400px; height: 400px;  border: 1px solid black; display: table;">
    <div style="display: table-cell; vertical-align: middle; background: green;">
        <div style="width: 50px; height: 50px; background: red;"></div>
    </div>
</div>

4.flex垂直居中(2012版)

方法： 在想要垂直居中的父元素上设置display: flex; align-items: center

5.flex垂直居中(2009版)

方法： 用法类似2012版本的flex，但是注意浏览器兼容性，带上浏览器内核前缀webkit或moz，在父元素上设置display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical;

6.绝对定位和top，负的margin-top

方法：在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; top: 50%; margin-top: 该元素宽度的一半再乘负一

7.绝对定位和top，bottom，margin

方法：在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; top: 0; bottom: 0; margin: auto 0;

说明：这样的特殊用法也和margin的计算原理有关，在<<精通CSS>>这本书中也有更详细的介绍。

8.绝对定位和transform

方法：在想设置水平居中的元素的父元素设置position: relative; 或 position: absolute;，该元素设置position: absolute; top: 50%; transform: translate(0, -50%);

说明： transform涉及到集合变换，translate(0, -50%)表示在y轴上向负方向平移50%的单位，单位是该元素的高度。

3.总结

1.注意事项

当然，上述是常用的8种水平居中和8中垂直居中，这里没有提到grid，使用grid一样可以达到上述效果。

2.规律总结

实现水平居中和垂直居中方法的选择：

常见情景	16种方法选择
元素高度/宽度不确定时	flex2009/2012法，table/table-cell法
元素为行内元素时	text-align/line-height法
元素高度/宽度确定时	除了text-align/line-height法之外任何方法都可选
元素为块级元素时	除了text-align/line-height法之外任何方法都可选

Vanghua

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
水平居中和垂直居中方法

参考并稍作修改：https://juejin.cn/post/6844903799446831117#heading-5https://juejin.cn/post/6844903474879004680#heading-0https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content1.水平居中1.行内元素的水平居中方法：在行内元素的父元素上设置text-align: center;2.块级元素的水平居中方法：在块级元素上设置m
复制链接

扫一扫