CSS3实现DIV垂直居中+水平居中的四种方法

最新推荐文章于 2023-09-30 13:11:25 发布

转载最新推荐文章于 2023-09-30 13:11:25 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/pomelott/p/6531006.html

本文介绍了四种不同的CSS技术来实现网页元素的水平垂直居中布局，包括display属性的不同用法、定位与负margin结合以及利用表格布局的方法。

<div class="div1">
    <div class="div2"></div>
</div>

html结构如上

方法1：display：table-cell + textalign:center

注：display:table-ceil会使元素变为内联元素

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            display: inline-block;
        }

方法2：display:table-ceil + margin: 0 auto

        .div1{
            width: 200px;
            height: 150px;
            background: dodgerblue;
            display: table-cell;
            vertical-align: middle;
        }
        .div2{
            width: 60px;
            height: 30px;
            background: yellow;
            margin: 0 auto;
        }

方法3：定位+负的margin，css如下：

 1         .div1{
 2             width: 200px;
 3             height: 150px;
 4             background: dodgerblue;
 5             position: relative;
 6         }
 7         .div2{
 8             width: 60px;
 9             height: 30px;
10             background: yellow;
11             position: absolute;
12             top: 50%;
13             left: 50%;
14             margin-left: -30px;
15             margin-top:-15px;
16         }

方法4：内部div放入表格中，dom结构如下：

 1 <div class="div1">
 2     <table class="t1">
 3         <tr>
 4             <td></td>
 5             <td></td>
 6             <td></td>
 7         </tr>
 8         <tr>
 9             <td></td>
10             <td><div class="div2"></div></td>
11             <td></td>
12         </tr>
13         <tr>
14             <td></td>
15             <td></td>
16             <td></td>
17         </tr>
18     </table>
19 </div>

只需使外层div与table的长宽一致便可，css如下：

 1         .div1{
 2             width: 200px;
 3             height: 150px;
 4             background: dodgerblue;
 5             text-align: center;
 6             vertical-align: middle;
 7         }
 8         .div2{
 9             width: 60px;
10             height: 30px;
11             background: yellow;
12             display: inline-block;
13         }
14         .t1{
15             width: 200px;
16             height: 150px;
17         }

*直观感受方法4略显臃肿，但究竟使用哪种方法就需要视情况分析。比如说需要使用表格，并且在表现层中央需要一个块级元素，那么方法4就显得两全其美了。其余三种方法就需要分析div内部和外部的DOM结构和元素。总之，没有最好的，只有最合适的。

转载于:https://www.cnblogs.com/pomelott/p/6531006.html