前端開發筆記（2） —— css居中布局

水平居中，垂直居中，水平垂直居中...

老生常談的問題。

水平居中

先給兩個div，一個父容器，一個子容器。

.parent{ height: 50px; width: 200px; margin-top: 300px; margin-left: 300px; background-color: gray;}.child{ height: 100%; width: auto; background-color: #333; color: #fff;}<div class="parent"> <div class="child">DEMO</div></div>

效果如圖

水平居中布局1

.parent{ text-align: center;}.child{ display: inline-block;}

水平居中布局2

.parent{ text-align: center;}.child{ display: table; margin: 0 auto;}

水平居中布局3

.parent{ position: relative;}.child{ position: absolute; left: 50%; transform: translateX(-50%);}

水平居中布局3

.parent{ display: flex; justify-content: center;}

水平居中布局4

.parent{ display: flex;}.child{ margin: 0 auto;}

以上四種方法都可以實現水平居中，效果如圖:

垂直居中

先給兩個div，一個父容器，一個子容器。

.parent{ height: 200px; width: 50px; margin-top: 300px; margin-left: 300px; background-color: gray;}.child{ height: auto; width: 100%; background-color: #333; color: #fff;} <div class="parent"> <div class="child">DEMO</div> </div>

效果如圖

垂直居中1

.parent{ position: relative;}.child{ position: absolute; top: 50%; transform: translateY(-50%);}

垂直居中2

.parent{ display: flex; align-items: center;}

效果如圖

水平垂直居中1

.parent{ height: 200px; width: 100px; margin-top: 300px; margin-left: 300px; background-color: gray;}.child{ height: auto; width: auto; background-color: #333; color: #fff;}.parent{ text-align: center; display: table-cell; vertical-align: middle;}.child{ display: inline-block;}

水平垂直居中2

.parent{ height: 200px; width: 100px; margin-top: 300px; margin-left: 300px; background-color: gray;}.child{ height: auto; width: auto; background-color: #333; color: #fff;}.parent{ position: relative;}.child{ position: absolute; left: 50%; top:50%; transform: translate(-50%,-50%);}

效果如圖：