我们在写网页的时候，经常会遇到需要让div里面的文字居中显示的情况，别急，方法其实有不少！这里总结几个超实用的技巧给你！
利用padding来调整位置
比如说，你想让div里的文字距离左边距离20px，距离顶部100px，你可以给div加上padding，例如padding-left:20px; padding-top:100px;。不过要注意，padding会影响容器的大小，所以写代码之前记得先算好整个div的尺寸，别搞得乱七八糟。
使用margin来实现居中
给div设置合适的margin值也是让文字或内容居中的好办法，尤其是左右margin设置为auto时，可以实现水平居中。超级方便！
绝对定位来调整位置
如果你想精准地控制文字在div中的位置，可以用position:absolute; top:50px; left:20px;这样的方法，能把内容放在你想要的准确位置，是不是很酷？
text-align属性轻松居中
要让div中的文字水平居中，给div加上text-align:center;，简单又直接。这个方法特别适用于行内元素，比如文本和图片。
用盒子模型撑起布局
还有一个常用的做法是，给div设置一个宽度为100%的盒子，然后设置文本居中，这样div内部的文字自然就靠中间了，比如：
.p1 {
text-align: center;
width: 100%;
}
怎么样，是不是很easy？
说到div里面的元素布局，那也是五花八门，有时候文字左对齐，图片右对齐，你肯定想问怎么搞成这样呢？告诉你几个分分钟搞定的技巧：
元素是行内的话，用text-align就搞定
如果是文本和图片这类行内元素，想水平居中，给父元素设置text-align:center;就OK了，真的是太简单了。
对于块级元素，text-align就不管用喽
碰上块级元素，比如div本身，text-align:center;就不顶用，这时候得靠给元素设置margin-left:auto; margin-right:auto;，当然这前提是你知道这个元素的宽度。脑补一下，这招就是让块级的盒子自动“呼哧呼哧”地左右挤压，然后居中了。
要混合排版，可以用flexbox或者table布局
现在主流超推荐的是用flex布局的，设置display:flex; justify-content:space-between; align-items:center;，通过调整空间，让左边、右边、居中元素都乖乖站在各自位置，特别灵活。
图片在div里面居中显示
你想图片水平居中，可以给div设置text-align:center;，然后上下居中就稍微麻烦点，可以用padding-top调节，或者干脆用flexbox做，让图片和文本都能乖乖地停在正中间。
div上下居中怎么办？
想让div里的内容上下居中，有两种简单方法：
- 第一，给div设置固定高度，然后用line-height等于这个高度，文字就垂直居中啦，简单粗暴；
- 第二，直接用flex布局，display:flex; align-items:center; justify-content:center;，没毛病的现代解法！
哇，这些方法用上，网页排版再也不是噩梦啦！
div里面文字要完全居中，最简单的方法是什么？
嘿，这个超级简单，直接在div里加上text-align:center;，文字就瞬间水平居中了！如果还想垂直居中，给div加个display:flex; align-items:center; justify-content:center;，妥妥的满分答案，超级省心又不费劲，真的，试试看！
使用padding调整文字位置会有什么坑？
哎呀，padding确实能帮调整文字和内容的位置，但你要小心了！它会改变div的实际大小，比如说你本来设了100px宽，padding一加，整个盒子尺寸就往外“胖”了。如果你没算好布局，别怪我没提醒你，页面可能会崩溃，画面乱成一锅粥呢！
块级元素要居中，为什么text-align不起作用？
这个问题问得好！text-align是给行内元素和行内块元素调节水平对齐的，块级元素自己是独占一行的，所以它根本不受这个属性支配。要想居中块元素，必须得给它设置宽度，然后左右margin设为auto，才能“乖乖”居中，是不是很神奇呢？
flex布局和传统方法比，怎么选？
说实话，flex简直是布局的救星，没它不行！马上告别复杂又乱七八糟的margin计算，直接写display:flex，一会儿让元素水平居中，一会儿让它们两头靠，想咋样就咋样，简直不要太舒服。不过，如果兼容性是硬伤，传统方法还能帮忙撑场，毕竟老浏览器可能不咋支持flex。总之，能用flex就用，效率杠杠滴！
添加评论