DIV居中之div水平垂直居中

前言

我们经常遇到需要把div中的内容进行水平和垂直居中。这里介绍一些让DIV水平居垂直中的方法.

目录

  1. 使用margin:auto使DIV水平垂直居中
  2. 使用绝对定位的DIV水平垂直居中
  3. 使用display:box实现水平垂直居中

一.使用margin:auto使DIV水平居中

margin:auto;
position: absolute;
top:0px;
bottom:0px;
left:0px;
right:0px;

二.使用绝对定位的DIV水平垂直居中

width:200px;
height:100px;
position: absolute;
left:50%;
top:50%;
margin-top:-50px;
margin-left:-100px;

三.使用display:box实现水平垂直居中

width:350px;
height:100px;
border:1px solid black;
  
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

四.总结

上面三种方法我都有测试验证,具体选择哪一种全凭个人喜好.