Day7--垂直置中(2)

第 12 屆 iThome 鐵人賽

DAY 7

Modern Web

30天CSS&Bootstrap排版統整系列第 7 篇

12th鐵人賽

zxc29019009

團隊nutc imac 惠靈頓牛排

2020-09-22 20:47:12

1045 瀏覽

分享至

使用align-items: center;

想讓元素使用彈性布局，需給其父元素設置display:flex。
生效條件
1.給父元素設置align-items:center;，子元素即可垂直置中。
範例

.parent{
        display: flex;
        align-items: center;  //垂直置中
        width: 500px;
        height: 100px;
        border:2px solid green;
 }
    .child{
         width: 100%;
         height: 30px;
         border:2px solid blue;
 }

    <div class="parent">
        <div class="child"></div>
    </div>

成果

Day6--垂直置中(1)

Day8--垂直置中(3)

系列文

30天CSS&Bootstrap排版統整共 30 篇

RSS系列文訂閱系列文

9 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

參賽組數

1064 組

團體組數

40 組

累計文章數

22043 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙

30天CSS&Bootstrap排版統整系列 第 7 篇

Day7--垂直置中(2)

使用align-items: center;

尚未有邦友留言

標記使用者

30天CSS&Bootstrap排版統整系列第 7 篇