行内元素：text-align:center;，保证元素不会独占一行
.container{text-align:center;}.inline{display:inline;/*or*//*display:inline-block;*/}
divclass="container"divclass="inline"helloworld!/div/div
定宽块状元素：margin:0auto;，让浏览器自动填充剩余空间
.has_width{width:px;margin:0auto;}
divclass="has_width"helloworld!/div
不定宽块状元素：position+transform
.box{position:relative;}.no_width{position:absolute;left:50%;transform:translateX(-50%);}
divclass="box"divclass="no_width"helloworld!/div/div02上下垂直居中
父级设置display:flex;align-items:center;
.container{height:px;display:flex;align-items:center;}
divclass="container"divclass="center"helloworld!/div/div
父级设置相对定位，子元素设置绝对定位和transform
.box{height:px;position:relative;}.center2{position:absolute;top:50%;transform:translateY(-50%);}
divclass="box"divclass="center2"helloworld!/div/div03盒子居中
弹性布局(推荐)：display:flex;justify-content:center;align-items:center;
.box1{width:px;height:px;display:flex;justify-content:center;align-items:center;}
divclass="box1"divclass="center1"helloworld!/div/div
绝对定位：top、bottom、left、right设为0，margin设为auto
.box2{width:px;height:px;position:relative;}.center2{width:px;height:px;position:absolute;top:0%;left:0%;right:0%;bottom:0%;margin:auto;}
divclass="box2"divclass="center2"helloworld!/div/div
负margin居中：top、left设为50%，margin-top设为负半高度px，margin-left设为负半宽度px
.box3{width:px;height:px;position:relative;}.center3{width:px;height:px;position:absolute;top:50%;left:50%;margin-top:-50px;/*高度的一半*/margin-left:-50px;/*宽度的的一半*/}
divclass="box3"divclass="center3"helloworld!/div/div
transform居中(IE9以下不支持)：top、left设为50%，transform:translate(-50%,-50%)
.box4{width:px;height:px;position:relative;}.center4{width:px;height:px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
divclass="box4"divclass="center4"helloworld!/div/div
绝对定位(百分比)：top、bottom、left、bottom设为25%，margin设为auto
.box5{width:px;height:px;position:relative;}.center5{position:absolute;left:25%;right:25%;top:25%;bottom:25%;margin:auto;}
divclass="box5"divclass="center5"helloworld!/div/div