文本DIV水平居中和垂直居中

Posted 2020-10-04

文本居中

text-align:center;    //代表文本居中

文本垂直居中

text-align:center;
height:100px;        //文本包含块的高度
line-height:100px;   //行内高度          垂直需要文本包含块的高度和行内高度一致

DIV居中

margin:0 auto;

DIV垂直居中

div垂直居中分两种情况，一种是已知该div的宽高；另一种是div的宽高是未知的。

1.宽高已知

{
     width:100px;
     height:100px;
     position:absolute;
     top:50%;               //距离左包含块
     left:50%;              //距离左包含块
     margin-left:-50px;     //-（该DIV的宽度/2）
     margin-top:-50px;      //-（该DIV的高度/2）
}

2.宽高未知（需要用到Jquery）

function resize(div){
       var windowWidth = $(window).width();        //获取当前浏览器窗口（可见区域）的宽度
       var windowHeight = $(window).height();      //获取当前浏览器窗口（可见区域）的高度
       var divWidth = div.outerWidth();            //获取该DIV的宽度（包括border以内）
       var divHeight = div.outerHeight();          //获取该DIV的高度（包括border以内）
       var w =  (windowWidth - divWidth)/2;             
       var h =  (windowHeight - divHeight)/2;
       div.css({
               position:"absolute",
               left: w+ "px",
               right: h + "px"
})
}

resize(..);

拓展

如图，在Jquery中，

$().width() 代表获取width，不包括padding/border/margin;

$().innerWidth()代表获取padding+width;

$().outerWidth()代表获取padding+wdith+border;

$().outerWidth(true)代表获取padding+width+border+margin;