up
down
Close
架站盒子
Web Development Box
 

CSS Flex 置中的方法

│ 2430 Views │ CSS

語法

<style>
.boxA{
max-width: 600px;
height: 100px;
border: 1px solid red;
margin: 1em auto;
display: flex;
justify-content: center;
align-items: center;
}
.boxB{
width: 300px;
border: 1px solid gold;
text-align: center;
padding: 10px;
}
</style>
<div class="boxA">
<div class="boxB">
文字
</div>
</div>

範例

文字

說明

需要做兩個 div ,第一個 div 設置 display: flex 以及 align-items: center 來控制裡面的物件位置,第二個 div 才是真正的內容,如果需要文字置中則再加上 text-align: center 即可。

延伸閱讀

本文是否對您有幫助?