當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS的六种垂直居中

發布時間：2024/9/19 CSS 71 豆豆

生活随笔收集整理的這篇文章主要介紹了 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