水平居中与垂直居中，以及对齐
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平居中与垂直居中，以及对齐相关的知识，希望对你有一定的参考价值。
我以前一直都搞不清楚水平居中与垂直居中，更不用谈什么对齐，临时抱佛脚，也找不到很好的答案，于是把网上的代码研究了一番，总结一下经验：
盒子水平居中：margin：0 auto
注意：在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE
如果宽度是100％，对齐是没有效果的，要给居中的元素一个宽度，否则无效。
加入margin:0 auto就不能加入float浮动样式，避免逻辑错误，造成布局居中不兼容。
行内元素水平居中：父元素设置text-align：center
单行文本垂直居中：line-height=height
通用垂直居中：父盒子：display：table子盒子：display：table-cell vertical-aglign：middle 低版本ie：子盒子：display：inline-block（这个个人感觉最好用！！）
块级元素垂直居中：定位+margin
块级元素垂直居中：利用padding-top与padding-bottom相等来实现
文字与图片对齐：
①移动端：弹性布局兼容性较好：display:flex;
box-align: center;
align-items: center;
②PC端：弹性布局兼容性差，因此：用display：table就可以了
③文字与图片在同一个div中，给这个div设置vertical-align：middle
④将图片设置为背景图，然后给文字盒子一个padding-left
⑤图片在父盒子中，文字在子盒子中，然后用margin控制对齐
⑥定位也可以用来居中，但是比较繁杂
以上是关于水平居中与垂直居中，以及对齐的主要内容，如果未能解决你的问题，请参考以下文章