css水平垂直居中四种常用方式
生活随笔
收集整理的這篇文章主要介紹了
css水平垂直居中四种常用方式
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
css水平垂直居中
第一種：flex布局水平垂直居中
思路：
給父盒子display屬性設置flex值，然后使用justify-content與align-item屬性進行居中。
參考:阮一峰的flex教程
核心代碼：
設置在父元素身上。
display: flex; //父元素flex布局 justify-content: center; //子元素水平居中 align-items: center; //子元素垂直居中總代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bigbox{width: 600px;height: 600px;border: 1px solid black;/* 黑色邊框 */display: flex;/*父元素flex布局*/justify-content: center;/*子元素水平居中*/align-items: center;/*子元素垂直居中*/}.centbox{width: 200px;height: 200px;background-color: aquamarine;}</style> </head> <body><div class="bigbox"><div class="centbox"></div></div> </body> </html>第二種：絕對定位和transform配合
思路：
先設置父元素postion:relative，因為之后要設置子元素postion:absolute，絕對定位是相對外層第一個不是static的父盒子進行定位。static是postion的默認屬性
然后把子元素的top和left都設置為50%，這時發現子盒子是向右下偏移了一些，再用transform屬性把盒子偏移回來。
核心代碼：
position: absolute; /*設置絕對定位*/ /*相對第一個不是static定位的父盒子進行定位*/ /*static是postion的默認屬性*/ left: 50%; top: 50%; /*距離第一個不是static定位的父元素上邊框與左邊框50%*/ transform: translate(-50%, -50%); /*向左移動50%本元素寬度*/ /*向上移動50%本元素高度*/總代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bigbox {height: 300px;width: 300px;border: 1px solid black;position: relative;}.centbox {height: 50px;width: 50px;background-color: aqua;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}</style> </head><body><div class="bigbox"><div class="centbox"></div></div> </body></html>第三種：絕對定位與外邊距auto配合
思路：
盒子使用絕對定位，left，top，right，bottom都設置為0，再設置margin:auto把盒子自適應居中。
要把父盒子設置為position:relative
核心代碼：
position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; /*自適應外邊距*/總代碼：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bigbox {height: 300px;width: 300px;border: 1px solid black;position: relative;}.centbox {height: 50px;width: 50px;background-color: aqua;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}</style> </head><body><div class="bigbox"><div class="centbox"></div></div> </body></html>第四種：p標簽文字水平垂直居中
思路：
text-align用來文字水平居中，再把p標簽line-height文字行高設置為父元素高度，就可以實現水平垂直居中。
核心代碼：
text-align:center; line-height:600px; /*此時600px為父元素盒子高度*/總代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.bigbox{width: 600px;height: 600px;border: 1px solid black;/* 黑色邊框 */}.bigbox{text-align: center;line-height: 600px;}</style> </head> <body><div class="bigbox"><p>我要居中</p></div> </body> </html>總結
以上是生活随笔為你收集整理的css水平垂直居中四种常用方式的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 算法导论书本第3版_中文版和英文版_完整
- 下一篇： 新浪短链接API接口示例