说到让子div在父div里水平居中，其实大家可能第一反应就是用text-align:center，没错，对于简单的文本或行内元素，这招特管用。比如说你有一段文字放在div中，直接在父容器上加个text-align:center，文字就乖乖地跑到中间去了。
但是呢，来了来了，对于更复杂的布局，比如一个块级的子div，光靠这个可不行。有没有更好的方法呢？答案当然是有啦，那就是咱们超棒的flexbox！只要给父div加上这些神奇代码：
display: flex;
justify-content: center;
哇塞，子div立刻乖乖地居中啦！顺便告诉大家，要是想垂直居中，也可以加上：
align-items: center;
这样，水平和垂直两个方向都成了包治百病的居中利器！真的，flexbox就是现代网页里让你摆布元素的神器。
想让一行字水平居中？其实就那么简单，小白也能上手：
<p>，然后用CSS给它加个text-align:center。让浏览器看了就知道：“这行字我要居中显示！”除了文字，背景图片也常常需要调整位置。如果你想让背景图靠右又居中（特别是垂直方向），试试这个写法：
background-position: center right;
这个意思就是横向右靠边，纵向居中，搞定了你所有的摆姿势需求。再配合设置background-repeat: no-repeat;和固定尺寸的div，效果真是锦上添花。
顺带一提，要让页面底端的文字居中，也不难：
.div_foot {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
height: 50px;
background-color: #f3f3f3;
}
这样文字就垂直固定在页面底部中央，不管你页面多长，它都老老实实站那，妥妥的！
怎么用CSS让div里的文字水平和垂直居中呢？
哎呀，这个嘛，最简单有趣的方法就是用flexbox啦！给父div加上display: flex; justify-content: center; align-items: center;，这三句话一说，里面的文字或者子元素一下子就居中又垂直对齐完美啦！特别简单，感觉像魔术一样呢，强烈推荐！
text-align:center 是不是只能让文字水平居中啊？
对的对的，text-align:center确实是针对行内元素或者文本内容的。你要是用它去想让一个块级div居中，那就悲剧了。所以呢，如果是复杂布局，flexbox是更靠谱的“居中神器”哦，强烈建议试试！
背景图片怎么设置成靠右并且垂直居中呢？
你只要在CSS里写background-position: center right;，它就会乖乖地横向靠右，竖向居中啦！超级便捷，还能搭配background-repeat: no-repeat;避免重复出现，这样你的背景图就绝对不会跑丢了！
如何让底部文字固定显示并且居中？
来来来，这个问题很实用，你可以用position: fixed; bottom: 0; width: 100%; text-align: center;把文字固定在页面底部，而且绝对居中。这招一用，文字就跟钉子一样“钉”在那里，侧滑也不影响，超级实用有没有！
添加评论