應用flex實現垂直居中

行使css?flex完成垂直居中。flex籠統不是實現垂直居中最好的決定，由于IE8,9其實不支持它。

那會，為了用flex實現垂直居中，咱們首先要確立一個包裹著圖片的div元素，此后給它定義一些基礎底細屬性。

如下圖片img寬度為(設置裝備擺設為)100px，高度為100px。

HTML代碼部分：

CSS代碼一小塊：

body{ background:#999}

.flexbox{width: 300px;height: 250px;bac公斤round:#fff;display: flex;align-items: center}

.flexbox img{width: 100px;height: 100px;align-items: center;}

成績：

閱讀器運行造詣：完成圖片垂直居中組織

抒發：

1、為了用flex完成垂直居中，咱們首先要設立一個包裹著圖片的div元素，此后給它定義一些根柢屬性。

2、div元素的display屬性配置為flex。

3、div增進其他一條屬性align-items: center;

總結

以上是生活随笔為你收集整理的html div flex,利用css flex实现垂直居中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。