1.水平居中设置左右外边距为auto，可以让设置宽度的块级元素水平居中。对于非块级元素，可以先通过设置“display:block”将其转换为块级元素。注意：一般情况下，块级元素的默认宽度是其父元素宽度的100%，但
元素除外，它默认会随内容调整宽度。div{宽度：200px;//显示：块；//非块级元素margin:0auto;}另外，如：Hello,world
虽然元素居中，但是里面的文字并没有居中。如果此时需要让文字居中，可以加上“text-align:center”。二、水平居中和垂直居中1、通过绝对定位垂直居中div{position:absolute;宽度：100px；高度：80px；左：50%；//居中div的左上角top:50%;左边距：-50px；//通过分别设置左边距和上边距为-width/2和-height/2，将div的中心点移到左上角，实现居中。margin-top:-40px;}注意：绝对定位的元素相对于最近的定位祖先定位，或者如果元素没有定位的祖先，则相对于原始包含块定位。2.或者用下面的方法div{width:300px;高度：300px；保证金：自动；位置：绝对；左：0；顶部：0；右：0；底部：0；}注意：一定要设置width和height，因为设置left,top,right,bottom为0后，width和height会和浏览器视口尺寸保持一致。3、使用CSS3更容易实现居中效果。转换方法：div{width:200px;高度：100px；位置：绝对；顶部：50%；//实现div左上角居中left:50%;转换：翻译（-50%，-50%）；//将元素分别向左和向上移动宽度和高度的一半，div的中心点居中}4.固定定位居中。将上述方法中的绝对定位替换为固定定位后，实现窗口水平和垂直居中。即当窗口有滚动条时，无论你如何移动滚动条或缩放窗口，元素都会固定在中心。绝对定位时，只有当滚动条移动到最左边和最上面时，元素才会在窗口中居中。这时候元素在窗口缩放的时候也会居中。5.flex弹性布局：.container{display:flex;证明内容：居中；align-items:center;}注意：当flex容器元素的宽/高大于window出现滚动条时，flexitem不一定在window的中心。它位于flex容器的中心。
