[CSS] CSS display:flex实现内容水平垂直居中展示
生活随笔
收集整理的這篇文章主要介紹了
[CSS] CSS display:flex实现内容水平垂直居中展示
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
display:flex實現內容水平垂直居中展示
需要增加下面兩點就能實現
首先父級元素必須有高度，沒有高度就無法垂直居中，如果想全屏垂直居中，可以設置高度為100vh
比如body設置為這樣
body{display: flex;justify-content: center;align-items: center;height: 100vh;}里面的子元素就會垂直水平居中顯示
源碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><meta name="renderer" content="webkit"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><title>獨立私有化智能在線客服系統</title> </head> <body> <style>body{background: rgb(242,243,247);display: flex;justify-content: center;align-items: center;height: 100vh;}.sub,.main,.admin{letter-spacing: 18px;font-family: fangsong;font-size: 38px;writing-mode: vertical-rl;}.main{font-size: 60px;margin: 0px 20px;}.admin{display: block;text-decoration: none;color: red;border: 2px solid red;padding: 10px 0px 2px 0px;border-radius: 12px;margin-top: 150px;font-size: 20px;letter-spacing: 5px;}.admin:hover{color: red;}.sub span{font-size: 50px;} </style><a href="/login" target="_blank" class="admin">在線客服</a><h1 class="main">各路相知 </h1><div class="sub">互聊片刻，<span>結交</span></div></body></html>效果：
總結
以上是生活随笔為你收集整理的[CSS] CSS display:flex实现内容水平垂直居中展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 来自python的【str字符串内置函数
- 下一篇： CSS磨砂效果