CSS的六种垂直居中
生活随笔
收集整理的這篇文章主要介紹了
CSS的六种垂直居中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方法一單行文字：則可以設置的line-height的數值，讓其等于父級元素的高度！
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background: green;height: 200px;}a {height: 100%;line-height: 200px;color: red;}</style> </head> <body> <div class="box"><a href="">ggg </a> </div> </body> </html>方法二文字居中??display: table
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;display: table;}.box .box2 {color: red;display: table-cell;vertical-align: middle;}</style> </head> <body> <div class="box"><div class="box2">ddddd</div> </div> </body> </html>方法三塊的居中 diaplay:inline-block,vertical-align:middle? 設置偽元素
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background: green;height: 200px;}.box::after, .box2 {display: inline-block;vertical-align: middle;}.box::after {content: '';height: 100%;}.box2 {background-color: red;width: 20px;height: 20px;}</style> </head> <body> <div class="box"><div class="box2"></div> </div> </body> </html>?
方法四?塊的居中使用flex
父級：display：flex；
子元素：align-self：center；
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background: green;height: 300px;width: 600px;display: flex;}.box2 {background: red;width: 30px;height: 30px;align-self: center;}</style> </head> <body> <div class="box"><div class="box2"></div> </div> </body> </html>方法五 translateY
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;}.box .box2 {background-color: red;width: 30%;height: 30%;position: relative;top: 50%;transform: translateY(-50%);}</style> </head> <body> <div class="box"><div class="box2"></div> </div> </body> </html>方法六?translateY
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;position: relative;}.box .box2 {background-color: red;width: 50%;height: 50%;position: absolute;top: 50%;transform: translateY(-50%);}</style> </head> <body> <div class="box"><div class="box2"></div> </div> </body> </html>https://github.com/7117/frontendCollection/tree/master/CSS/%E5%B1%85%E4%B8%AD
總結
以上是生活随笔為你收集整理的CSS的六种垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 刺身是什么意思？
- 下一篇： CSS的alt：图片无法显示时候显示al