flex彈性佈局 垂直居中
關於flex彈性佈局的基本概念可以參閱display:flex彈性佈局一章節。
下面分享一段程式碼例項,它實現了讓元素水平垂直居中效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width:500px; height:400px; background:#ccc; display:flex; justify-content:center; align-items:center; } #antzone { width:50px; height:50px; background:green; } </style> </head> <body> <div id="box"> <div id="antzone"></div> </div> </body> </html>
利用彈性佈局實現垂直居中非常簡單,更多內容可以參閱相關閱讀。
相關閱讀:
(1).justify-content參閱justify-content 屬性一章節。
(2).align-items參閱align-items 屬性一章節。
相關文章
- 元素水平垂直居中【彈性佈局 || Translate】
- flex彈性佈局實現元素垂直居中效果程式碼例項Flex
- flex佈局(彈性佈局)Flex
- Flex-彈性佈局Flex
- display:flex 彈性佈局Flex
- flex彈性佈局 響應式佈局Flex
- css之彈性佈局(flex)CSSFlex
- 彈性盒模型,flex佈局模型Flex
- CSS:彈性佈局(display:flex)CSSFlex
- Flex佈局-垂直居中並換行顯示內容Flex
- flex 彈性佈局的基本操作Flex
- React Native——flex(彈性佈局)React NativeFlex
- flex彈性佈局程式碼例項Flex
- flex彈性佈局的基本介紹Flex
- CSS佈局之水平居中和垂直居中CSS
- Flex彈性佈局(附超Q小demo)Flex
- 前端面試3:flex彈性盒佈局前端面試Flex
- display: flex彈性佈局程式碼例項Flex
- css經典佈局系列一——垂直居中佈局CSS
- css--flex彈性佈局詳解和使用CSSFlex
- flex居中佈局程式碼例項Flex
- flex佈局屬性Flex
- 父盒子寬度不固定水平居中彈性佈局
- 彈性佈局(伸縮佈局)
- 垂直居中 absolute 和 flex 方法Flex
- 網頁佈局實現之div垂直居中網頁
- CSS3 Flex 彈性佈局例項程式碼詳解CSSS3Flex
- CSS Flex佈局屬性整理CSSFlex
- 【佈局技巧】Flex 佈局下居中溢位滾動截斷問題Flex
- 水平垂直居中佈局的多種實現方式
- CSS佈局 --- 居中佈局CSS
- 【基礎知識】Flex-彈性佈局原來如此簡單!!Flex
- flex佈局屬性快速參考Flex
- Flex佈局教程及屬性速查Flex
- 總結幾種常見的垂直居中的佈局
- css3實現垂直居中-flexCSSS3Flex
- flex 佈局Flex
- Flex佈局Flex