CSS居中的几种方式

作者: MGd | 来源:发表于2017-06-08 11:16 被阅读33次

CSS常见布局技巧
CSS居中小结
Css
css居中几种方式
CSS布局(不完全)总结
CSS居中的几种方式
CSS居中的几种方式
CSS居中的几种方式
CSS居中的几种方式
css水平、垂直居中的方法

水平居中方式

1.margig:0 auto;(不能受到float影响)

<style>
    *{
        padding: 0;
        margin: 0;
    }
        .box{
            width: 300px;
            height: 300px;
            border: 3px solid red;
            /*text-align: center;*/
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
<!--html-->
<body>
    <div class="box">
        ![](..)
    </div>
</body>

2.text-align: center;（文本水平居中）
设置在父元素上

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 5px solid red;
            text-align: center;
        }
        img{
            display: block;
            width: 100px;
            height: 100px;
            /*margin: 0 auto;*/
        }
    </style>
<body>
<div class="box">
    ![](images/1.jpg)
    <p>文本内容</p>
</div>
</body>

水平垂直居中方式

1.子绝父相定位居中
子绝父相定位到top值50%，left值50%。需要定位的元素的margin-top/margin-left减去宽高的一半。
这种方法的局限性在于需要知道需要垂直居中的宽高才能实现，经常使用这种方法

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:5px solid red;
            position: relative;           //父相
        } 
        img{
            width: 100px;
            height: 100px;
            position: absolute;       //子绝
            top: 50%;         
            left: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    </style>
<body>
<div class="box" >
    ![](images/2.jpg)
</div>
</body>

2.子绝父相定位和margin:auto;
这个方法也很实用，不用受到宽高的限制,也很好用

   <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:5px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
<body>
<div class="box" >
    ![](images/3.jpeg)
</div>
</body>

3.子绝父相定位和transfrom
这个方法比较高级，用到了形变，据我所知很多大神喜欢使用这个方法进行定位，逼格很高的方法。

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:5px solid red;
            position: relative;
        }
        img{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);      //平移（水平值，垂直值）
        }
    </style>
<body>
<div class="box" >
    ![](images/4.jpg)
</div>
</body>

4.diplay：table-cell
其实这个就是把其变成表格样式，再利用表格的样式来进行居中，很方便

 <style>
     *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:5px solid red;
            display: table-cell;
            vertical-align: middle;             //垂直居中
            text-align: center;                  //水平居中
          /*margin: 100px auto;*/           //受影响
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
<body>
<div class="box" >
    ![](images/5.jpg)
</div>
</body>

5.display:flex;居中
这个用了C3新特性flex,非常方便快捷，在移动端使用完美，pc端有兼容性问题。

 <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border:5px solid red;
            display: flex;
            justify-content: center;
            align-items:center;
            /*margin: 100px auto;*/                 //不受影响
        }
        img{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div class="box" >
    ![](images/4.jpg)
</div>
</body>