1、所有行内元素、行内块元素、块级元素的水平居中，可以设置它们的父元素：text-align：center，这种做法可以不设置子元素的宽度。代码如下：
<body text-align=“center”> <div id='parents'>text</div> <input type="text"> <span>texttt</span> </body>
2、水平居中----块级元素：在设置了块级元素的宽度的前提下，给块级元素设置属性：margin：0 auto；（仅块级元素）
3、垂直居中----所有元素：在已知父元素的高度的前提下，设置父元素的属性：line-height：父元素的高度值；
4、垂直居中----块级元素（div）：（1）利用定位的方法：设置父元素为相对定位，自己为绝对定位margin调整或transfrom:translate（）；（2）display：flex；justify-content:center;align-items:center;
一个例子：
<style>
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;//本来定位点为左上角，所以要实现真正的垂直居中还需要将元素向左上移动自己宽高的一半
}
</style>
<body>
<div id="parent">
<div id="child">Content here</div>
</div>
</body>5、
垂直居中----所有元素：设置父元素的属性：display：table 自己的属性设置为：display：table-cell;vertical-align:middle;（这种方法也必须设置父元素的高度才有作用）