【CSS】居中的几种实现方式

た入场券 2022-10-12 12:14 212阅读 0赞

# 1. 前言 #

在 `CSS` 布局中，居中几乎是最常见的操作。居中方法有多种，但是需要清楚地知道在何种情况下用哪一种方式。

# 2. 实现方法 #

`注`：以下代码片段中，非重要代码的使用省略号替代

**1）flex 布局**

我在日常开发中最经常用到的是 `flex` 布局，因此使用 `flex` 进行垂直居中的操作也最常见，如下图的橙色部分，见 `[Code 1.1]`  
![在这里插入图片描述][20210704185418760.png]

/* Code 1.1 */
    <div id="flex">
    	<div style="width: 50px;height: 50px;background-color: #ffcc66;"></div> </div> #flex{ 
    	display: flex;
    	justify-content: center;
    	align-items: center;
        ...
    }

抛开 flex 布局不谈，以下分别介绍水平居中和垂直居中的方法

**2）水平居中**

`注`：关于 `inline`、`block` 的区别，可以看这篇文章[inline、block、inline-block的区别][inline_block_inline-block]

`inline` 元素：将父级设置为 `text-align：center`，见 `[Code 2.1]`  
![在这里插入图片描述][20210704185431898.png]

/* Code 2.1 */
    <div id="container"> <span>inline元素</span> </div> #container{ 
    	...
    	text-align: center;
    }

`block` 元素：将本身设置为 `margin：auto`（自身水平居中），见 `[Code 2.2]`  
![在这里插入图片描述][20210704185501317.png]

/* Code 2.2 */
    <div id="container"> <div id="block">block元素</div> </div> #container{ 
    		...	
    }
    #block{ 
    	margin: auto;
        ...
    }

`absolute` 元素：`left：50%` \+ `margin-left` 负值（自身宽度/2），见 `[Code 2.3]`  
![在这里插入图片描述][20210704185511141.png]

*  `margin-left` 取负值，会往自身的左方向移动
 *  `left:50%` 会让元素的左端居中，因此需要加上 `margin-left` 来让其变成整体居中

/* Code 2.3 */
    <div id="container"> <div id="absolute">absolute元素</div> </div> #container{ 
    	position: relative;
    	...	
    }
    #absolute{ 
    	position: absolute;
    	left: 50%;
    	margin-left: -25px;
    }

**3）垂直居中**

`inline` 元素：`line-height` 的等于 height，见 `[Code 3.1]`  
![在这里插入图片描述][20210704185520670.png]

/* Code 3.1 */
    <div id="container"> <span>inline元素</span> </div> #container{ 
    	width: 100px;
    	height: 50px;
    	line-height: 50px;
    }

`absolute` 元素：

1.  **知道自身高度**  
    `top:50%` \+ `margin-top 负值（自身高度/2）`，见 `[Code 3.2]`  
    ![在这里插入图片描述][20210704185528737.png]

*  与 `margin-left` 一样，`margin-top` 设为负值会让自身元素向上偏移（但 `margin-right` 和 `margin-bottom` 不一样，详细可看这篇文章[margin设为负值会发生什么？][margin]）

/* Code 3.2 */
    <div id="container"> <div id="absolute">absolute元素</div> </div> #container{ 
    	...
        position: relative;
    }
    
    #absolute{ 
        ...
    	position: absolute;
        height: 50px;
    	top: 50%;
    	margin-top: -25px;
    }

1.  **不知自身宽高，只兼容支持CSS3的浏览器**  
    `top`、`left` 让左上角居中定位，并通过 `translate` 往上往左移动自身宽高的50%，见 `[Code 3.3]`  
    ![在这里插入图片描述][20210704185538537.png]

/* Code 3.3 */
    <div id="container"> <div id="absolute">absolute元素</div> </div> #container{ 
        ...
    	position: relative;
    }
    
    #absolute{ 
        ...
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%, -50%);
    }

1.  **不知自身宽高，兼容性好**
    
    `top、left、bottom、right = 0` \+ `margin：auto`，见 `[Code 3.4]`  
    ![在这里插入图片描述][20210704185549998.png]

/* Code 3.4 */
    <div id="container"> <div id="absolute">absolute元素</div> </div> #container{ 
        ...
    	position: relative;
    }
    
    #absolute{ 
        ...
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    	margin: auto;
    }

# 3. 总结 #

*  让元素垂直居中的方法中，最通用的方法是采用 `flex` 布局
 *  知道自身元素宽高的情况下，可使用 `margin-left` 和 `margin-top` 负值的方法来做居中
 *  不知道自身元素宽高
    
     *  不考虑浏览器兼容性：使用 `transform: translate` 方法
     *  考虑浏览器兼容性：使用 `top、bottom、right、left = 0` 的方法

[20210704185418760.png]: /images/20221005/ecc2f69224164e02bb6ee514a11e1599.png
[inline_block_inline-block]: https://blog.csdn.net/weixin_42678675/article/details/118406972
[20210704185431898.png]: /images/20221005/e3d50fabe507434f8874b2b6a8fb7088.png
[20210704185501317.png]: /images/20221005/95b2cc14d1914216b0f4a198bedf8c26.png
[20210704185511141.png]: /images/20221005/83d7b2ae58014ab9b42079776ef4e70a.png
[20210704185520670.png]: /images/20221005/512d500621b3498abf367ae4364b374a.png
[20210704185528737.png]: /images/20221005/cc0530bf013d47628b1b8a925fb572d2.png
[margin]: https://blog.csdn.net/weixin_42678675/article/details/118514164
[20210704185538537.png]: /images/20221005/b5cdcb609572401da0bed20657b64669.png
[20210704185549998.png]: /images/20221005/4316edd5b42b453593a12bf071456e65.png