CSS盒子居中常用的方法有哪些

小编给大家分享一下CSS盒子居中常用的方法有哪些，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

第一种：

用css的position属性

<style type="text/css">        .div1 {            width: 100px;            height: 100px;            border: 1px solid #000000;            position: relative;        }        .div2 {            width: 40px;            height: 40px;            background-color: red;            position: absolute;            margin: auto;            top: 0;            left: 0;            right: 0;            bottom: 0;        }    </style>    <div class="div1">        <div class="div2 ">        </div>    </div>

效果图：

第二种：

利用css3的新增属性table-cell, vertical-align:middle;

<style type="text/css">        .div1 {            width: 100px;            height: 100px;            border: 1px solid #000000;            display: table-cell;            vertical-align: middle;        }        .div2 {            width: 40px;            height: 40px;            background-color: red;            margin: auto;        }    </style>    <div class="div1">        <div class="div2">        </div>    </div>

效果：

第三种：

利用flexbox布局

<style type="text/css">    .div1 {        width: 100px;        height: 100px;        border: 1px solid #000000;        display: flex;                justify-content: center;        align-items: center;    }    .div2 {        height: 40px;        width: 40px;        background-color: red;    }</style><div class="div1 ">    <div class="div2 ">    </div></div>

效果：

第四种：

利用transfORM的属性（缺点：需要支持HTML5）

<style type="text/css">    .div1 {        width: 100px;        height: 100px;        border: 1px solid #000000;        position: relative;    }    .div2 {        height: 40px;        width: 40px;        background-color: red;        position: absolute;        top: 50%;        left: 50%;        -ms-transform: translate(-50%, -50%);        -moz-transform: translate(-50%, -50%);        -o-transform: translate(-50%, -50%);        transform: translate(-50%, -50%);    }</style><div class="div1 ">    <div class="div2 ">    </div></div>

效果图：

看完了这篇文章，相信你对“CSS盒子居中常用的方法有哪些”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！