元素居中的方法总结

前端小师妹

水平居中（text-align:center；）

这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素（比如span、img、a等）直接在父元素上添加text-align:center;属性即可。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{
        border: 3px solid red;
        width: 200px;
        text-align: center;
</style>
</head>
<div class="box">
hello
</body>
</html>
复制代码

效果：

注意：这个居中，是“hello”相对于红色框框的水平居中

使用margin:0 auto;水平居中

前提：**给元素设定了宽度和具有display：block；的块级元素。**让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            border: 5px solid yellow;
            width: 300px;
        .box{
            border: 3px solid red;
            width: 200px;
            display: block;
            margin: 0 auto;
            text-align: center;
</style>
</head>
<div class="box">
hello
</body>
</html>
复制代码

效果：

注意：这个居中，是红色框框相对于黄色框框的居中

定位实现居中(需计算偏移值)

原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。缺点：高度宽度需事先知道。

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            border: 5px solid yellow;
            position: relative;
            width: 200px;
            height: 200px;
        .box{
            border: 3px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
</style>
</head>
<div class="box">
hello
</body>
</html>
复制代码

效果：

left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;
这四个参数用来调整红色框框相对于黄色框框的居中

jquery实现水平和垂直居中。

jquery实现水平和垂直剧中的原理是通过jquery设置div的css，获取div的左，上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div的css设置要在resize（）方法中完成，就是每次改变窗口大小时，都要执行设置div的css.

$(function(){
          $(window).resize(function(){
            $('.mydiv').css({
              position:'absolute',
              left:($(window).width()-$('.mydiv').outerWidth())/2,
              top:($(window).height()-$('.mydiv').outerHeight())/2
复制代码

定位实现居中(不需计算偏移值，margin：auto；和定位搭配使用)

这种方法好处是行内元素和块级元素都适用,但是需要知道元素本身的宽度。
http:// jingyan.baidu.com/artic le/482 …

使用css3的新属性transform:translate(x,y)属性 --> 相对于浏览器居中

这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
原理: 通过定位使元素左上角居中，再通过 translate 位移元素使之中心居中，由于 translate支持百分比，所以也就不用自己算偏移量了

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 3px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
        body{
            border: 3px solid yellow;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;/*水平居中*/
            align-items: center;/*垂直居中*/
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
</style>
</head>
<div class="box">
hello
</body>
</html>
复制代码

效果：

使用flex居中

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            border: 3px solid red;
            width: 100px;
            height: 100px;
            text-align: center;
        body{
            border: 3px solid yellow;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;/*水平居中*/
            align-items: center;/*垂直居中*/
</style>
</head>
<div class="box">