搞不定网页中线设计挺头大的，尤其是手机上更晕菜了。基本很多人都爱将东西放在中央，看起来整洁又好看。今儿就来分享几个CSS中线的小技巧，希望对你有所帮助哟~
一、水平居中布局
你看我们这些宅人，普普通通的？其实没那么简单！
你试试，只要的代码后面加上`margin:0auto`这几个字儿，保证你的东西跑到了页面正中间！左右两侧各设置为自动，它自己就会找准位置。不过，要是元素已经有固定定位或者是在动态移动的话，这个小技巧可能就不那么灵光了喔~
公式就是加上‘text-align:center’就行了！不管是文字还是图片在这个地方都能巧妙地对其！速度快效果好！
.box {
width: 200px;
margin: 0 auto;
}
二、垂直居中布局
垂直居中比水平居中稍微复杂一点，但也不是无解。
.parent {
text-align: center;
}
.child {
display: inline-block;
}
给你的元素设个”行高”！假如就一句话，那就让它和字体大小一致呗，这样字体不就在正中间了吗？尽管这招挺管用的，不过要注意，只适用于单句~
别急，告诉你个小技巧，就是用`display:table`和`table-cell`这两个家伙。就是把元素想象成表格排好就行了，想让他们竖着看齐，直接把它们弄成表格形式后再变成单元格，最后加上名字叫`vertical-align:middle`的属性就搞定！
三、水平垂直居中布局
.parent {
display: flex;
justify-content: center;
}
.child {
width: 50px;
}
水平线对齐，头疼吗?别怕，我有小妙招，一招解决！
想让东西放中间？这样做：先固定好元素，再慢慢调整大小，直到放在正中位置。当然，记得看看元素有多大，处理起来更顺手。
试试看利用’Transform’功能，只需要给’translateX’和’translateY’两个参数添个负号，立马解决问题！这样的话，无论元素大小如何，都能轻松对齐！真的是非常方便！
.box {
height: 80px;
line-height: 80px;
}
别忘了试一试Flexbox，真的很好使！只需要把你老爸的那个display属性改成flex，记得关注下justify-content跟align-items这俩兄弟，这样搞定一切居中问题就像是吃饭喝水那么easy了。
四、Flex布局的威力
Flex布局可真是牛逼！又好理解又管用。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
别烦恼了，快来试试Flaxbox。你做网页的时候可以用这个工具，轻轻松松就能让页面四个角对齐。而且教程也很直白，以后再修改就方便多啦～
五、实际应用中的选择
选哪种居中式好？其实就得看具体情况
.parent {
display: flex;
align-items: center;
}
.child {
height: 50px;
}
如果你的大块内容想要居中，就用下这个方法：`margin:0auto`；至于那些小玩意，直接选个位置打个`text-align:center`就OK了！觉得这样还不够酷炫？那来试试Flexbox，保证让你眼前一亮！
六、常见问题及解决方法
最近总是遇到麻烦事，像元素大小乱跳，还有父容器的高度也不稳定，怎么办？
哈喽，赶紧试试Flexbox和`transform`，让你烦恼的大小问题都解决了！Flexbox解决各种不等长布局，`transform`就管旋转变形等，跟元素大不大无关喔。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* height/2 */
margin-left: -25px; /* width/2 */
height: 50px;
width: 50px;
}
七、小结
老实说，中布局有点麻烦，但是解决方法其实很好找的，这不就告诉你了吗！希望你们前端水平能越来越高啦～
聊聊，说说你都喜欢咋样的中间姿势？大家都等着看你的看法~别忘了点赞分享
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
}
评论0