CSS中怎么让div内容水平垂直都居中 div里内容居中有哪些方法

CSS中如何让div内容水平居中的方法

说到div内容水平居中，第一波操作其实很简单。通常，如果你div里放的是文本或者内联元素，直接用text-align: center;就能搞定，真的是太方便了！这个属性就是让内容在水平方向上往中间靠，操作起来没啥难度。

但是，如果你的div里边放的是块级元素，比如说另一个div，那可得用点别的招儿啦。最常用的是给块级元素设置margin: 0 auto;，这招儿就是让它左右自动给边距，自己会乖乖跑到中间。还有一种比较“灵活”的方法，就是让内层块级元素变成inline-block，然后让爸爸div来个text-align: center;，这样也能帮你水平居中。

还有个超级popular的方式是用Flexbox。你给外面那个div设置display: flex;，然后用justify-content: center;，布置一下，就是分分钟搞定水平方向的居中，超级牛！

CSS中如何实现div内内容的垂直居中和综合居中

垂直居中一听就让人头疼对吧？其实，现代CSS给了咱们超多便利。这里给你们总结几种大法宝：

Flex布局：给外层div设置display: flex;，再用align-items: center;，这样子元素就会在垂直方向安安静静地居中显示。如果你还想水平居中，那就加个justify-content: center;，完美！
Grid布局：这个也很酷。设置外部div为display: grid;，再加上align-content: center;和justify-content: center;，整个内容嗖嗖地垂直和水平同时居中，妥妥的选择。
相对定位和负边距：有些情况下，你想用点老派的办法。父元素position: relative;，然后给目标元素设置margin-top为父元素高度一半的负值，嘿！内容就居中了。如果你要用内边距啥的，那推荐套个容器，这样更稳。
inline-block特性：父元素设置为inline-block，然后能配合行高和垂直对齐达到垂直居中，也是个不错的小技巧。
图片居中小秘籍：图片常常让人费劲，水平居中你可以把图片宽度定成原来的一半，放容器里就能美美哒居中。垂直居中的话，用Flexbox布局就没错了，给父容器display: flex;，然后justify-content和align-items都设为center，嗖的一下子完事。