@ CSS
visibility:hidden 和 display:none的区别及元素可见性判定

概要

display:none意味着相关元素不会出现在页面上(尽管仍可以通过dom与它进行交互)。所在页面上并没有给该元素分配空间。而visibility:hidden则与之不同,visibility:hidden只是意味着元素不可见,页面上不但给元素分配了空间,也对元素进行了渲染,只是元素不可见而已。

如何使DIV在屏幕上水平垂直居中显示?兼容性要好

CSS代码

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: 400px;
}

只用CSS来实现DIV在屏幕上水平垂直居中显示的方案大概有几种吧,但本文中的方案可能是兼容性最好的方案了。关于这一点StackOverflow上也有提及。

利用CSS实现文本垂直居中(在固定高度的容器中)

CSS代码

#box {
    height: 120px;
    line-height: 120px;
    text-align: center;
    border: 2px dashed #f69c55;
 }

上述代码只适用于单行文本的垂直居中,我们通过将line-height设置为与包含框元素相同的高度从而实现文本的垂直居中。

$ 热门标签
$ 声明
本站所有代码及文字都是作者精心汇编整理而成,转载代码及文字请明确注明出处和作者名称。