display:flex实现内容水平垂直居中展示
需要增加下面两点就能实现
首先父级元素必须有高度，没有高度就无法垂直居中，如果想全屏垂直居中，可以设置高度为100vh
比如body设置为这样
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
里面的子元素就会垂直水平居中显示
源码：
"en"> "utf-8"> "renderer" content="webkit"> "viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">独立私有化智能在线客服系统 "/login" target="_blank" class="admin">在线客服class="main"> 各路相知
class="sub">互聊片刻，结交
效果：
![[CSS] CSS display:flex实现内容水平垂直居中展示](https://johngo-pic.oss-cn-beijing.aliyuncs.com/articles/20230526/726254-20220701161123219-2123665964.png)
![[CSS] CSS display:flex实现内容水平垂直居中展示](https://www.johngo689.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Original: https://www.cnblogs.com/taoshihan/p/16435051.html
Author: 大灰狼小红帽
Title: [CSS] CSS display:flex实现内容水平垂直居中展示
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/553607/
转载文章受原作者版权保护。转载请注明原作者出处！