CSS 水平和垂直居中对齐

点此查看原文

1. 水平居中对齐元素
   可以使用margin: auto水平居中对齐块级元素。设置元素宽度可以防止其延伸到容器边缘外侧。
   注意： 当width属性不设置或设置为100%时居中对齐不会生效。

2. 文字居中对齐
   这个很常见，都知道的text-align: center

3. 居中对齐图片
   可以使用display使其显示为block，然后使用margin: auto;

   display: block;
   margin: auto;
   

4. 左右对齐，使用position
   可以使用position：absolute并结合left和right属性进行左右对齐。
   需要注意的是，绝对定位的元素脱离了标准文档流，可能与其他元素重叠。
   **提示：**在使用position进行对齐元素时， 为了防止不同浏览器之间的样式表现的差异，通常需要定义body的margin和padding属性。

   IE8及之前的版本在使用position时会遇到一个问题：如果一个容器设定了确定的width，并且!DOCTYPE声明丢失，IE8及其之前的版本会自动添加一个17px的margin-right。这可能是专门为了给滚动轴留的空间。因此，使用position时一定记得设置!DOCTYPE。

5. 左右对齐-使用float
   同position一样，在使用position进行对齐元素时， 为了防止不同浏览器之间的样式表现的差异，通常需要定义body的margin和padding属性。在!DOCTYPE丢失时同样有一个margin-right的问题。

6. 垂直居中对齐-使用padding
   对于块级元素可以设置padding值上下一样；对于行级元素，可以先设置display: block，然后设置padding-top和padding-bottom相等。

7. 垂直居中对齐-使用line-height
   设置line-height与height的值相等即可。

8. 垂直居中-使用position和transform
   使用position绝对定位设置top和left均为50%，然后使用transform: translate(-50%,-50%)进行位置校正。

   .center { 
       height: 200px;
       position: relative;
       border: 3px solid green; 
   	}
   
   	.center p {
       margin: 0;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
   }
   

可以查看[https://blog.csdn.net/luofeng457/article/details/90065199]再谈水平垂直居中了解更多方法(https://blog.csdn.net/luofeng457/article/details/90065199)