div 居中（cssdiv居中）-微PE WEIPE.NET

一、CSS Div 居中

1、常用的div居中样式（margin: 0 auto;）：Div居中的原理是将元素的margin属性left和right设置为auto，这样就可以让div居中（当然本质原理就是让元素的左右边距都相等），如下：

div {

margin: 0 auto;

width: 50px;/*容器需要明确宽度*/

}

2、CSS3中支持新的定位模式可以实现div居中：使用 CSS3 新增的定位模式relative 和 absolute，将元素定位功能抽取出来，引入 position：absolute 属性来实现div居中，如下：

div {

position: absolute;

left: 50%;

top: 50%;

width: 50px;

margin-left:-25px;

margin-top: -25px;

}

3、使用绝对定位模式实现div居中：

div{

position: fixed;

top:50%;

left:50%;

margin-top:-50px;

margin-left:-50px;

width:100px;

height:100px;

}

4、使用display: table属性实现div居中：

div {

display: table;

margin: 0 auto;

width: 50px;

}

二、HTML Div 居中

1、使用div和百分比实现div居中：在HTML中使用div容器，将div容器的宽度设置成百分比，并设置margin-left和margin-right为 auto，来实现div居中，如下：

Content Here

（1）div元素居中方法

一、使用CSS样式

1、使用position和margin实现div元素居中：

① 设置div元素的position属性值为absolute或fixed，并将其left、right属性值都设为0，同时设置margin-left、margin-right属性值均为auto；

② 设置div元素的position属性值为relative，并将left、top属性值都设为0，同时设置margin-left、margin-right属性值均为auto；

2、使用text-align实现div元素居中：

将div的display属性设为inline-block，然后将父级div的text-align属性值设为center，即可实现div元素的居中显示；

3、使用flex实现div元素居中：

① 设置div元素的display属性值为flex，同时将其 justify-content属性值设置为center；

② 设置div元素的display属性值为inline-block，同时将父div元素的display属性值设为flex，并将其align-items属性值设置为center；

二、使用HTML结构实现居中

1、使用table实现div元素居中：

我们可以把div元素嵌套在

标签中，并设置的align属性值为center；

2、使用transform实现div元素居中：

给div元素设置position属性值为fixed或absolute，然后设置transform属性值为translate(-50%,-50%)，即可实现div元素的居中显示；

三、使用Javascript实现div元素居中：

浣跨敤Javascript鏈変互涓嬪嚑绉嶆柟娉曞彲浠ュ疄鐜癲iv鍏冪礌鐨勫眳涓細

1、计算div元素宽度和高度，以及父元素的宽度和高度，然后用此计算计算div元素的top和left的属性值；

2、获取div元素的getBoundingClientRect()属性，根据其返回值来判断div元素在页面中的位置，从而计算出div元素的位置；

3、计算出父元素的宽高及div元素的宽高，然后设置div元素的left和top属性值，实现div元素的居中；

4、使用offsetLeft和offsetRight方法获取div元素宽高，根据获取到的宽高进行计算，设置div元素的位置，实现div元素的居中。

四、使用jQuery实现div元素居中

1、使用jQuery的.css()方法来设置div元素的left和top属性，使div元素在父元素中水平和垂直居中；

2、使用jQuery的.animate()方法实现div元素的缓动居中；

3、使用jQuery的.position()方法计算出div元素的位置，然后将div元素的left和top设置为计算出的位置，实现div元素的水平垂直居中。

总结：div元素的居中方法有几种，可以根据需求灵活选择或结合使用，以达到最佳的布局效果。在要求兼容较低的浏览器情况下，使用HTML结构及CSS样式来居中div元素是比较通用的方法，但在要求使用动画居中效果时，可以使用Javascript或jQuery来实现div元素的美观居中。