CSS——几种万能居中的方法

心已赠人 2022-03-17 02:18 346阅读 0赞

###  ###

*   *  calc()
     *  通过定位
     *  将元素更改为为inline-block元素后水平居中
     *  将元素更改为block元素后水平居中
     *  利用flex布局进行垂直居中

比如说在网页中想要一个宽高分别为300px,200px的div盒子（.box）水平/垂直居中。可以通过以下几种方法实现～

## calc() ##

.box{
                position: fixed;
                top:calc(50% - 100px);
                left: calc(50% - 150px);
                width: 300px;
                height: 200px;
                background-color: pink;
            }

> calc 中的50%是指父级盒子的一半，减号 的空格不能少，  
> 如果是计算top值，减去div一半的height；  
> 如果是计算left值，减去div一半的width，嗯，这样就可以实现水平垂直都居中啦。

## 通过定位 ##

*  水平居中

.box{
                position: fixed;
                left: 0;right: 0;margin: auto;
                width: 300px;
                height: 200px;
                background-color: pink;
            }

*  垂直居中

.box2{
                position: fixed;
                top: 0;bottom: 0;margin: auto;
                width: 300px;
                height: 200px;
                background-color: pink;
            }

*  水平垂直居中

.box2{
                position: fixed;
                top: 0;right:0;bottom: 0;left:0;
                margin: auto;
                width: 300px;
                height: 200px;
                background-color: pink;
            }

## 将元素更改为为inline-block元素后水平居中 ##

.box的父元素{
    	text-align:center;
    }
    .box{
    	display:inline-block;
    }

## 将元素更改为block元素后水平居中 ##

.box{
    	display:block;
    	margin:auto;
    }

## 利用flex布局进行垂直居中 ##

.box的父元素{
    	display:flex;
    	align-items:center;
    }