CSS居中

在使用 CSS 进行布局时，经常需要实现元素的居中。CSS 提供了多种方法来实现对象的垂直居中，但选择哪种方法可能因情况而异。比如常用的 margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中…… 下面就给大家介绍几种不同的 CSS 居中方法。

一、水平居中

首先是水平居中，最简单的办法当然就是：

margin:0 auto;

也就是将 margin-left 和 margin-right属性设置为 auto，从而达到水平居中的效果。

文字的水平居中方法：

文字的水平居中利用 line-height 设为 height 的一样即可：

.wrap{
line-height: 200px;/*垂直居中关键*/
text-align:center;
height: 200px;
font-size: 36px;
background-color: #ccc;
}

二、padding填充

利用 padding 和 background-clip 属性可以配合实现 div 的水平垂直居中。通过设置 padding 为容器的一半宽度，并使用 background-clip 设置为 content-box,将背景裁剪到内容区外沿，再利用 padding 设为外 div 减去内 div 的差的一半，来实现：

.children {
width: 100px;
height: 100px;
padding: 50px;
background-color: black;
background-clip:content-box;/*居中的关键*/

三、translate(-50%,-50%)

使用 position 属性配合 translate(-50%, -50%) 可以实现 div 在容器中的水平和垂直居中。但是，这种实现方式可能看起来比较奇特，因为百分比计算是以元素自身为基准的，而不是以父元素为基准。

#ex3_content{
left:50%; top:50%; 
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray; color:white; position:absolute; }

这个方法同样适用于没固定大小的内容，min-width，max-height，overflow:scroll等。

四、绝对定位居中

父容器元素：position: relative

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

注意：高度必须定义，建议加 overflow: auto，以防止内容溢出。

五、视口居中

内容元素：position: fixed，z-index: 999，记住父容器元素position: relative

示例：

.Absolute-Center.is-Fixed {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 999;
}

六、响应式

响应式设计是一种网页布局方法，它可以根据不同设备的屏幕尺寸和分辨率自动调整元素的大小和位置。在响应式设计中，元素的宽度和高度通常使用百分比来设置，这样可以确保在不同设备上都能保持合适的比例。同时，还可以设置元素的最小和最大宽度，以及添加内边距（padding）来控制元素与周围元素的距离。

示例：

.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 400px;
max-width: 500px;
padding: 40px;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

七、偏移

只要设置了 margin: auto;，内容块就会垂直居中。同时，可以通过设置 top、left、bottom 和 right 属性来调整内容块的偏移量。

示例：

.Absolute-Center.is-Right {
width: 50%;
height: 50%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: auto; bottom: 0; right: 20px;
text-align: right;
}

八、溢出

当内容比父容器高时，为了防止溢出，可以添加 overflow: auto; 属性。另外，如果没有设置任何内边距（padding），也可以添加 max-height: 100%; 来确保内容不会超出父容器的高度。

示例：

.Absolute-Center.is-Overflow {
width: 50%;
height: 300px;
max-height: 100%;
margin: auto;
overflow: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

九、调整尺寸

resize 属性可以让用户调整元素的尺寸，为了限制尺寸的范围，可以使用 min- 和 max- 属性来设置最小和最大尺寸，如果添加了 overflow: auto; 属性，当内容超出元素大小时会出现滚动条。

示例：

.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
resize: both;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}

十、margin填充

可以通过将子 div 的 margin-top 设置为父 div 高度减去子 div 高度的一半，然后再通过设置 overflow 为 hidden 来触发父 div 的 BFC（Block Formatting Context）。这样可以让父 div 重新计算其布局，从而解决子 div 超出父 div 的问题。

示例：

.parent {
margin:0 auto;
height:@parentWidth;
width:@parentWidth;
background: red;
overflow:hidden;/*触发BFC*/
}

十一：absolute定位

利用 position: absolute 搭配 top、left 属性设置为 50%，再将 margin 设为负值，也可以实现 div 的水平和垂直居中。首先需要定义父 div 和子 div：

示例：

.children {
position:absolute; 
left:50%; 
top:50%; 
margin:-25px 0 0 -25px ;
height:50px;
width:50px;
background-color: black;
}

以上代码中的 margin 中的值为该 div 宽度的一半。

十二、图片居中

一般的图片居中都是和 text-align 一样，将图片包装在一个 div 中，将该 div 的 text-align 设为 center 即可。

有一种特殊的方式，利用了一个图片进行占位，以让父容器获得高宽，从而让进行 -50% 偏移的图片能有一个参照容器作百分比计算。优点是可以不知道图片的大小，随便放张尺寸不超过父容器的图片上去都能做到居中。另外，兼容性好，IE6 都是能顺利兼容的。代码如下：

示例：

p {
position:absolute;
top:50%;
left:50%;}
.show-img {
position:absolute;
right:50%;
bottom:50%;
}

十三、transform居中

上面讲到的 div 居中的例子中，div 的宽度都是固定的，然而实际项目中可能会遇到不定宽的 div，特别是响应式或者移动端的设计中，更加常见。所以下面介绍一种不需要定宽的 div 水平垂直居中方法。

示例：

.children-inline {
position: relative;
left: -50%;
-webkit-transform : translate3d(0, -50%, 0);
transform : translate3d(0, -50%, 0);
background-color: black;
color:white;
}

首先利用 float，将需要居中的div的父 div 也就是 children 的宽度收缩，然后 left:50%,将 children 的左边与水平中线对齐。这个时候，还没有真正居中，需要将 children-inner 左移动 -50%，这样就水平居中了。

再来说说垂直方向，先将 children 的 top 设为50%，然后其上边和垂直中线对齐了，同样，需要将children-inner 上移动 -50%。但是这个 50% 是计算不出来的，所以用到了 transform : translate3d(0, -50%, 0)。

十四、flex居中

最后来介绍一下 CSS3 中的 display:flex 来实现的水平垂直居中的方法。

示例：

.parent {
display:flex;
align-items: center;/*垂直居中*/
justify-content: center;/*水平居中*/
width:100%;
height:100%;
background-color:red;
}