面试笔记（五）---盒子居中

矫情吗；* 2022-05-17 23:16 148阅读 0赞

#  #

布局中经常会遇到让一个盒子水平且垂直居中的情况，以下总结了几种居中方法：

1.  margin固定宽高居中
2.  负margin居中
3.  绝对定位居中
4.  table-cell居中
5.  flex居中
6.  transform居中
7.  不确定宽高居中（绝对定位百分数）
8.  button居中

不兼容IE低版本的可以用其他方法hack。

不多说，直接上代码：  
大多数方法的html都相同，所以写一个了，不同的再单独写出来。

（demo中有代码和效果）

HTML:

<body>

</div>

</body>

*  margin固定宽高居中

这种定位方法，纯粹是靠宽高和margin拼出来的，不灵活。

CSS:

\#container \{

width: 600px;

height: 500px;

border: 1px solid \#000;

margin: auto;

\#box \{

width: 200px;

height: 200px;

margin: 150px 200px;

background-color: \#0ff;

点击查看[demo][]

*  负margin居中

利用负的margin来进行居中，需要知道固定宽高，限制比较大。

CSS:

\#container \{

position: relative;

width: 600px;

height: 500px;

border: 1px solid \#000;

margin: auto;

\#box \{

position: absolute;

width: 200px;

height: 200px;

left: 50%;

top: 50%;

margin: -100px -100px;

background-color: \#0ff;

点击查看[demo][demo 1]

*  绝对定位居中

利用绝对定位居中，非常常用的一种方法。

CSS:

\#container \{

position: relative;

width: 600px;

height: 500px;

border: 1px solid \#000;

margin: auto;

\#box \{

position: absolute;

width: 200px;

height: 200px;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

background-color: \#0ff;

点击查看[demo][demo 2]

*  table-cell居中

利用table-cell来控制垂直居中。

CSS:

\#container \{

display: table-cell;

width: 600px;

height: 500px;

vertical-align: middle;

border: 1px solid \#000;

\#box \{

width: 200px;

height: 200px;

margin: 0 auto;

background-color: \#0ff;

点击查看[demo][demo 3]

*  flex居中

CSS3中引入的新布局方式，比较好用。缺点：IE9以及IE9一下不兼容。

CSS:

\#container \{

display: -webkit-flex;

display: flex;

\-webkit-align-items: center;

align-items: center;

\-webkit-justify-content: center;

justify-content: center;

width: 600px;

height: 500px;

border: 1px solid \#000;

margin: auto;

\#box \{

width: 200px;

height: 200px;

background-color: \#0ff;

点击查看[demo][demo 4]

*  transform居中

这种方法灵活运用CSS中transform属性，较为新奇。缺点是IE9下不兼容。

CSS:

\#container \{

position: relative;

width: 600px;

height: 600px;

border: 1px solid \#000;

margin: auto;

\#box \{

position: relative;

top: 50%;

left: 50%;

width: 200px;

height: 200px;

transform: translate(-50%, -50%);

\-webkit-transform: translate(-50%, -50%);

\-ms-transform: translate(-50%, -50%);

\-moz-transform: translate(-50%, -50%);

background-color: \#0ff;

点击查看[demo][demo 5]

*  不确定宽高居中（绝对定位百分数）

这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。

CSS:

\#container \{

position: relative;

width: 600px;

height: 500px;

border: 1px solid \#000;

margin: auto;

\#box \{

position: absolute;

left: 30%;

right: 30%;

top: 25%;

bottom: 25%;

background-color: \#0ff;

点击查看[demo][demo 6]

*  button居中

利用button做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。

HTML:

</button>

CSS:

button \{

width: 600px;

height: 500px;

border: 1px solid \#000;

div \{

width: 200px;

height: 200px;

margin: 0 auto;

background-color: \#0ff;

说到让一个div水平居中，立马想到最常用的就是margin:0 auto;但是这个的前提是必须知道盒子的宽度，盒子居中主要有两种情况：

一.确定盒子的宽度，解决办法有：

1.1 margin:0 auto;

1.2 position:relative;left:50%;margin-left:-0.5\*width;(用绝对定位也可以)

二.不确定盒子宽度的，而且盒子宽度可变的，方法如下

2.1 position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;

2.2 width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;

## **1.第一种** ##

**利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30**

**div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30**

按 Ctrl+C 复制代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{  width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div22{

margin-left: 30px;margin-top: 30px;

}

</style>

</div>

</body>

</html>

第一种

## **第2种** ##

**利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置**

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{  width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

position: relative;

}

.div22{

position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;

}

</style>

</div>

</body>

</html>

第二种

## **第三种** ##

**【】【】还是用css的position属性，如下的html**

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{  width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

position: relative;

}

.div22{

position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;

}

</style>

</div>

</body>

</html>

第三种

## **第四种** ##

**利用css3的新增属性table-cell, vertical-align:middle;**

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{  width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; height: 40px; background-color: green;}

.div11{

display: table-cell;vertical-align: middle;

}

.div22{

margin: auto;

}

</style>

</div>

</body>

</html>

第四种

## **第五种方法** ##

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.div1{  width: 100px; height: 100px; border: 1px solid #000000;}

.div2{ width:40px ; background-color: green;}

.div11{

display: table-cell;vertical-align: middle;

}

.div22{

margin: auto;

}

</style>

div居中方法

</div>

</body>

</html>

第五种方法

## **第六种方法** ##

**利用flexbox布局**

**直接在父元素上使用flexbox的布局**

<!DOCTYPE html>

<html>

<head>

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

}

.div2 {

height: 40px;

width: 40px;

background-color: green;

}

.div11 {

display: flex;

/*!*flex-direction: column;*!可写可不写*/

justify-content: center;

align-items: center;

}

</style>

</head>

<body>

</div>

</body>

</html>

第六种方法

## **第七种方法** ##

**利用transform的属性,注意子绝父相定位**

**缺点：需要支持Html5**

<!DOCTYPE html>

<html>

<head>

body {

margin: 100px auto;

position: relative;

}

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

background-color: red;

}

.div2 {

height: 40px;

width: 40px;

background-color: green;

}

.center {

position: absolute;

top: 50%;

left: 50%;

-ms-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-o-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

</style>

</head>

<body>

我是外部盒子

我要居中

</div>

</body>

</html>

第七种

## **第八种** ##

**两者都要固定定位,不常用**

**缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中**

<html>

<head>

.div1 {

width: 100px;

height: 100px;

border: 1px solid #000000;

background-color: red;

position: relative;

}

.div2 {

height: 40px;

width: 40px;

background-color: green;

margin:30px 30px;

}

.center{

position: fixed;

left: 50%;

}

</style>

</head>

<body>

我要居中

</div>

</body>

</html>

第八种方法

[demo]: http://foolgry.github.io/demo/center/center1.html
[demo 1]: http://foolgry.github.io/demo/center/center2.html
[demo 2]: http://foolgry.github.io/demo/center/center3.html
[demo 3]: http://foolgry.github.io/demo/center/center4.html
[demo 4]: http://foolgry.github.io/demo/center/center8.html
[demo 5]: http://foolgry.github.io/demo/center/center5.html
[demo 6]: http://foolgry.github.io/demo/center/center6.html