前端开发必备：水平垂直居中技巧大揭秘

水平居中设置

做网页设计或前端开发，总会有几个小问题让我们头疼（谁不想做得好看些！）就像“居中”这事儿，很让人矛盾（大家总希望页面舒服点儿）。那我来告诉你一个简单有效的办法：如果你碰到的部分是一整块（比如导航栏呀、标题啥的），那就试一试text-align这个东西，它能把文字完全藏起来。大多数时候，这种方法适合导航栏、标题以及长篇大论之类的地方。

.container {
   text-align: center;
}

告诉你，margin属性挺牛掰的，元素两边设个AUTO就让它可以自动跳到中间。还有那个Flexbox布局更是强大无比，让元素上下左右整齐对齐都是手到擒来。想要美化网页排版？非常轻松，选好Flexbox容器后用些CSS小招数就行！

.container {
   width: 300px;
   margin: 0 auto;
}

垂直居中设置

.container {
   display: flex;
   justify-content: center;
}

水平居中太麻烦？别担心，咱们可以搞定它。试着调调行高，把字往上挪一点，让它们跟容器看齐，不就能横平竖直了！

听过transform属性吗?它可不仅是换造型，还能精确定位！就拿translate()来说，再添上个”50%”,元素就可以自己垂直居中了。另外，Flexbox布局真的超好用，尤其是搞定那些有固定高度的元素垂直排列时。只要把align-items设为center，瞬间所有元素都乖乖排好了队！

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
}
span {
    font-size: 24px;
    line-height: 300px;
}

父元素中的居中设置

小家伙在爸爸那边稳稳的很轻松，找个位置调下距离就搞定了。马上找出它的地盘儿，再把四周弄均匀点儿，看着正合适，乖乖呆在爸爸这里。

.container {
    position: relative;
}
img {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

想让子元素之间有空隙吗？小窍门来了，快点把他们变成块级元素！如果还不明白，别急，Flexbox可以帮到你。只要把父元素变成flex模式，用justified-content和aligned-items这两个方法，子元素就能待在正中央了！

快来看看这个帖子，这儿有超全面的CSS居中方法！做网页，当然要看脸又实用！想要把字儿图儿视屏儿按纽搞得漂漂亮亮的可得花点心思。

.container {
    display: flex;
    align-items: center;
    height: 300px;
}