标签：哪些 visible 区别 水平居中 块元素 区域 继承 焦点 也会
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;
width: 200px;
background: red;
}注： 这种对齐方式要求内部元素(.text2)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
3) 脱离文档流的居中方式（position:absolute）
通过absolute的流体特性实现居中。（对立方向同时发生定位）
-------------------------html-----------------------------
<div class="demo3">
<div class="text3">demo</div>
</div>--------------------------css-----------------------------
.text3 {
width: 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;
width: 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);
}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)
裁剪隐藏，不占据空间，不能点击。
A: 1. 是否占据空间
2. 回流与渲染 见web的回流与重绘
3. 株连性 （visibility的继承性）A: display: none 不占空间，对布局没影响，会产生回流
visibility: hidden 占空间，对布局有影响，不产生回流，性能比display：none好A: z-index 只需要层叠上下文内的某一个父元素加个背景色即可，元素无需绝对定位，设置position: relative 也可隐藏。并且对原来的布局以及父元素的行为无任何影响
clip 必须绝对定位或固定定位，因为此属性定义了绝对定位对象可视区域的尺寸，所以必须得将position属性的值设置为absolute时才可使用并且会导致focus的焦点发生细微的变化，在特定条件下有体验问题。标签：哪些 visible 区别 水平居中 块元素 区域 继承 焦点 也会
原文地址：https://www.cnblogs.com/zppsakura/p/12395355.html
