CSS flex样式垂直居中
生活随笔
收集整理的這篇文章主要介紹了
CSS flex样式垂直居中
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
文章目錄
- 文章參考
- 問題描述
- flex 個人理解
- 對子元素影響
- 作用自身的樣式
- 作用于子控件
- 案例(水平垂直居中)
- 方法一（改變方向）
- 方法二（讓flex的子元素水平垂直居中）
文章參考
問題描述
由于div默認是沒有高度的，如果設(shè)置了高度，默認是從左到右，從上到下的順序來排布；
如果要做垂直居中，就需要計算div控件的高度，如果內(nèi)容變多或者變少，又會導致定位不準確，因此，最穩(wěn)妥的辦法就是讓瀏覽器自己去根據(jù)div的高度居中顯示
flex 個人理解
對子元素影響
設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。
作用自身的樣式
作用于子控件
案例(水平垂直居中)
方法一（改變方向）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style>.mycontainer{height: 200px;width: 200px;border: 1px solid red;/* flex樣式呈現(xiàn)*/display: flex;/*垂直排列*/flex-direction: column;align-items:center;/*由于flex-direction: column，因此align-items代表的是水平方向*/justify-content: center;/*由于flex-direction: column，因此justify-content代表的是垂直方向*/} </style> <body> <div class="mycontainer"><div class="">我是標題</div><div class="">我是內(nèi)容</div> </div> </body> </html>如果設(shè)置了 flex-direction: column,則 justify-content的水平居中 就變?yōu)榱舜怪狈较蛏系?#xff0c;align-items就變?yōu)榱怂椒较蛏狭?#xff0c;這點必須要注意
方法二（讓flex的子元素水平垂直居中）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <style>.mycontainer{height: 200px;width: 200px;border: 1px solid red;display: flex;align-items: center; // 垂直居中，針對的是mycontainer類下面的子元素，不包含“孫子”元素justify-content: center; // 水平居中，針對的是mycontainer類下面的子元素，不包含“孫子”元素} </style> <body> <div class="mycontainer"><div><div class="">我是標題</div><div class="">我是內(nèi)容</div></div> </div> </body> </html>align-items是針對子元素的垂直方向?qū)R方式，justify-content是針對子元素的水平方向?qū)R方式
總結(jié)
以上是生活随笔為你收集整理的CSS flex样式垂直居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 44 RT-Thread Nano移植到
- 下一篇： CSS 基本样式