DIV居中以及设置隐藏的几种方式

PartI DIV居中的常用方法：

1）text-align:center方式

--------------------------html-----------------------------

<div class="demo1">
<div class="text1">demo</div>
</div>

--------------------------css-----------------------------

.demo1 {
text-align: center;
}

注： 块元素不可以！

2）margin: 0 atuo方式
-------------------------html-----------------------------

<div class="demo2">
<div class="text2">demo</div>
</div>

--------------------------css-----------------------------

.text2 {
margin: 0 auto;
 200px;
background: red;
}

注： 这种对齐方式要求内部元素(.text2)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。

3) 脱离文档流的居中方式（position:absolute）
通过absolute的流体特性实现居中。（对立方向同时发生定位）
-------------------------html-----------------------------

<div class="demo3">
<div class="text3">demo</div>
</div>

--------------------------css-----------------------------

.text3 {
 300px;
height: 300px;
position: absolute;
background: red;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}

注： 行内块不可以！

4) display:table-cell
display:table-cell配合width，height
text-align:center,vertical-align:middle让大小不固定元素垂直水平居中,
这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现。
-------------------------html-----------------------------

<div class="demo4">
<div class="text4">demo</div>
</div>

--------------------------css-----------------------------

.demo4 {
display: table;
 100%;
height: 500px;
background: red;
}
.text4 {
display: table-cell;
text-align: center;
vertical-align: middle;
/* 影响效果 */
/* float: left; */
/* position: absolute; */
}

5) 垂直居中
只需设置line-height即可，height不需要设置。（因为div的高度是由行高决定的！）
-------------------------html-----------------------------

<div class="demo5">
<div class="text5">demo</div>
</div>

--------------------------css-----------------------------

.demo5 {
line-height: 80px;
background: red;
}

**6）使用css3的translate水平垂直居中元素 **
这种方式将脱离文档流的元素，设置top：50%，left：50%，然后使用transform来向左向上偏移半个内元素的宽和高。
-------------------------html-----------------------------

<div class="demo6">
<div class="text6">demo</div>
</div>

--------------------------css-----------------------------

.text6 {
position: absolute;
top: 50%;
right: 50%;
transform: translate(-50%, -50%);
}

7）使用css3计算的方式居中元素calc
这种方式同样是将脱离文档流的元素，然后使用计算的方式来设置top和left；
-------------------------html-----------------------------

<div class="demo7">
<div class="text7">demo</div>
</div>

--------------------------css-----------------------------

.text7 {
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 50px);
}

PartII CSS设置隐藏的常用方法：

1）display: none

将元素从文档中删除，不占空间，对布局没有影响，但会产生回流。

2）text-indent: -999em

将文字提到段落前面，不让看见，会影响布局

3）font-size: 0

直接将文字的高度设为0，从而不让看见

4）position: relative / absolute;

 **top: -999em / left: -999em**

不占据空间，只要距离显示屏幕足够大就ok,适用于比较写死的东西，不能随意修改。

5）visibity: hidden

只是看不见而已，占据空间，无法点击，元素依然会影响布局，不产生回流，性能较好

注： 该属性会继承，父元素使用其隐藏，子元素也会受其影响，看不见，必须通过设置visibility:visible让其显示

6）opacity: 0

设置透明度为0，使其看不见。占空间，可以点击。

7）z-index: -1 任意负值

上一级设置背景色，使其看不见。不能点击

8）clip: rect(0,0,0,0)

裁剪隐藏，不占据空间，不能点击。

Q: 使用隐藏元素需考虑的关键点有哪些？

A: 1. 是否占据空间

2. 回流与渲染  见web的回流与重绘

3. 株连性 （visibility的继承性）

Q: display: none 和 visibility：hidden的区别

A: display: none 不占空间，对布局没影响，会产生回流

visibility: hidden 占空间，对布局有影响，不产生回流，性能比display：none好

Q: z-index 负值设置隐藏和clip裁剪设置隐藏的区别

A: z-index 只需要层叠上下文内的某一个父元素加个背景色即可，元素无需绝对定位，设置position: relative 也可隐藏。并且对原来的布局以及父元素的行为无任何影响

clip 必须绝对定位或固定定位，因为此属性定义了绝对定位对象可视区域的尺寸，所以必须得将position属性的值设置为absolute时才可使用并且会导致focus的焦点发生细微的变化，在特定条件下有体验问题。