居中一个div常用的方法

2019-01-04

在页面中水平居中一个div

如果需要水平居中一个div元素， 那么最简单的方法我们可以直接设置margin: 0 auto;, 但前提条件是这个div元素要有width属性。

1
<div class="center-div"></div>
1
2
3
4
.center-div {
  margin: 0 auto;
  width: 100px;
}
  • 实例

在div中居中一个div

常用的方法还是通过设置内部div的margin:0 auto属性，而且要求内部的div的width属性被设定。

1
<div class="outer-div"><div class="inner-div"></div></div>

1
2
3
4
5
6
7
.outer-div {
  padding: 30px;
}
.inner-div {
  margin: 0 auto;
  width: 100px;
}
  • 实例

在div中居中一个inline-block div

通过设置outer-div的text-align属性来居中inner-div, text-align属性适用于所有的inline元素， 而且inner-div不再需要设置width属性。

1
2
3
4
5
6
7
8
9
10
11
<div class="outer-div"><div class="inner-div"></div></div>
``` 
```css
.outer-div {
  padding: 30px;
  text-align: center;
}
.inner-div {
  display: inline-block;
  padding: 50px;
}

  • 实例

在div中水平，垂直居中一个div

常用方法还是通过设置inner-div的margin属性，设置为auto。前提是inner-div要有固定的width和height属性。


1
2
3
4
5
6
7
8
9
```css
.outer-div {
  padding: 30px;
}
.inner-div 
  margin: auto;
  width: 100px;
  height: 100px;
}

  • 实例

在div中通过transform属性垂直居中任何元素

transform属性仅在如下浏览器中支持：

  • Chrome 63+
  • IE 11
  • Microsoft Edge 16+
  • Firefox 57 +
  • Safari 11 +
1
<div class="center-div"><p>你瞅啥？</p></div>
1
2
3
4
5
6
.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}
  • 实例

在页面底部居中一个div

inner-div 必须要具有width属性, 通过设置outer-div的bottom属性来调整outer-div与页面底部的间隙大小。如果想在页面顶部居中，可以换成设置outer-div的top属性。

1
<div class="outer-div"><div class="inner-div"></div></div>

1
2
3
4
5
6
7
8
9
10
11
.outer-div{
  position: absolute;
  bottom: 30px;
  width: 100%;
}
.inner-div{
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
  • 实例

在页面中水平和垂直地居中一个div

居中的div必须要具有width和height属性。

1
<div class="center-div"></div>

1
2
3
4
5
6
7
8
9
10
.center-div{
  position: absolute;
  margin: auto;
  top:0;
  right:0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
}
  • 实例

响应式地在页面中居中一个div

常用方法是通过设置margin和max-width属性来完成。

1
<div class="center-div"></div>
1
2
3
4
5
.center-div
{
     margin: 0 auto;
     max-width: 700px;
}
  • 实例

在div中响应式地居中一个div

常用方法是设置inner-div的max-width属性。

1
<div class="outer-div"><div class="inner-div"></div></div>

1
2
3
4
5
6
7
.outer-div{
  padding: 30px;
}
.inner-div{
  margin: 0 auto;
  max-width: 700px;
}
  • 实例

并排地，响应式地居中两个div

常用方法是将内部的div设置为inline-block,然后通过设置container的text-align属性。

1
<div class="container"><div class="left-div"></div><div class="right-div"></div></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.container{
  text-align: center;
}
.left-div{
  display: inline-block;
  max-width: 300px;
  vertical-align: top;
}
.right-div{
  display: inline-block;
  max-width: 150px;
}
@media screen and (max-width: 600px) {
  .left-div, .right-div {
    max-width: 100%;
  }
}
  • 实例

在页面中通过 Flexbox来水平和垂直地居中div

Flexbox只在如下浏览器中支持：

  • Chrome 63+
  • IE 11
  • Microsoft Edge 16+
  • FireFox 57+
  • Safari 11+

container 的height属性需要大于item高度。通过设置container的height: 100vh使container高度为整个浏览器视窗的高度。

1
<div class="container"><div class="item"></div><div>

1
2
3
4
5
6
7
8
9
10
.container{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.item{
  width:200px;
  height: 100px;
}
  • 实例
    

水平和垂直地居中一个动态div

通过设置display属性值为table来水平和垂直地居中div。 center-div的高度和宽度响应式地设置。
Table Display只在以下浏览器中支持:

  • Chrome 63+
  • IE 11
  • Microsoft Edge 16+
  • Firefox 57+
  • Safari 11+
1
<div class="outer-div"><div class="mid-div"><div class="center-div"></div></div></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.outer-div{
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.mid-div{
  display: table-cell;
  vertical-align: middle;
}
.center-div{
  margin: 0 auto;
  width: 300px;
  height: 100px;
}
  • 实例