css居中
一、水平居中
1.块本身水平居中
div{width: 100px;height: 100px;border: 1px solid #000;margin:auto;}<div>我本身水平居中</div>div的margin不设值怎么表示：不设值，也是auto/*给块居中 上20，左右居中，下不设*/margin:20px auto auto;
2.对块的子内容 text align：center;
text align：center;使用规则
1.只在块元素内部使用，直接用在内联元素上不生效。
#a{width: 100px;height: 100px;border: 1px solid #000;text-align: center; 正确用法}span{text-align: center; 错误用法 }<div id="a">blalala</div><span>balalala</span>
2.会对块元素中的所有内联内容，文本内容和被转换的内联块对齐。
例如b为子块，转成内联块后也会被居中对齐。当然b也可以直接用margin:auto;
3.子块会继承text align：center;使得子块内的内联内容居中显示。
例如b中的文字内容也居中对齐。
<style type="text/css">#a{width: 400px;height: 400px;border: 1px solid #000;text-align: center;}#b{width: 100px;height: 100px;border: 1px solid red;display: inline-block;}#c{width: 10px;height: 10px;border: 2px solid green;}p{border: 1px solid #000;}</style><div id="a">我是文本<p>我是p标签的文本</p><div id="b">我是b-div转化的内联块</div></div>
4.对a块本身不生效，块本身用margin ：auto（水平居中）。
3.display:flex;
display:flex;justify-content: center;
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p{border: 1px solid #000;width: 200px;display: flex;justify-content: center;}</style></head><body><p>balala</p></body></html>
三、块级元素垂直居中
以下代码子块水平垂直均对齐。
1.verticle-align+lineheight
可使文字也垂直居中。
原理：首先利用text-align+display：inline-block;实现子块的水平居中。
line-height在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。
vertical-align 特性值指定了每个行内框的垂直对齐方式。
所以用line-height 代替height，与vertical-align: middle;连用。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>居中</title><style type="text/css">.father{width: 300px;line-height: 300px;border: 1px solid #000;text-align: center;}.son {width: 100px;/* 行高是可以被继承的，重新设置子元素的行高，否则会继承父元素的行高*/line-height: 100px;border: 1px solid #000;display: inline-block;/* middle 把此元素放置在父元素的中部。 */vertical-align: middle;}</style></head><body><div class="father"><div class="son">balalalll</div></div>**/</body></html>
2.display单元格+verticle-align
原理：用display中的表格做，table-cell相当于单元格，把单元格的水平和垂直都居中，子要变成内联块。
.father{width: 300px;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;}.son{width: 100px;height: 100px;border: 1px solid blue;display: inline-block;}
3.绝对定位
子块固定宽高-绝对定位+margin
原理：父块用相对，子块用绝对定位，top,left均50%，此时可以使子块左顶点垂直居中
要使中心点居中,需改变左顶点的位置向左上移动，为x轴-50,y轴-50，margin可以做
.father{width: 500px;height: 400px;position: relative;border: 1px solid greenyellow;}.son{width: 100px;height: 100px;position: absolute;top: 50%; left: 50%;margin: -50px 0 0 -50px;border: 1px solid red;}
子块固定宽高-绝对定位+margin
原理：固定宽高的垂直居中，儿子定位上右下左都为0，margin居中即可.
.father{border: 1px solid greenyellow;width: 500px;height: 400px;position: relative;}.son{border: 5px solid red;width: 100px;height: 100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}
不固定宽高 绝对定位+transform
原理：不固定宽高的居中，固定也可以，左顶点居中后，用transform的属性
transform需做浏览器兼容
.father{border: 1px solid greenyellow;width: 300px;height: 400px;position: relative;}.son{border: 1px solid red;position: absolute;width: 100px;top: 50%;left: 50%;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);ie-moz-transform: translate(-50%,-50%);火狐-webkit-transform: translate(-50%,-50%); chrome、safari}
4.弹性布局display:flex;
在伸缩容器上设置侧轴对齐方式align-items: center
IE9-浏览器不支持
.father{width:300px;height:300px;border: 1px solid green;display:flex; /*弹性布局*/justify-content:center;align-items:center;}.son{height:100px;width:100px;border:1px solid red;}
5.网格布局display：grid;
在网格容器（父）上设置align-items或align-content
在网格项目（子）中设置align-self或者margin: auto 0
IE10-浏览器不支持，hbuider不显示样式，到浏览器中显示。
.father {width: 300px;height: 300px;display: grid;border: 1px solid #000;}.son {width: 100px;height: 100px;align-self: center;border: 1px solid red;}
