CSS垂直置中/水平置中（持續新增） - Molly M

2024-11-29

文章推薦指數： 80 %

投票人數：10人

水平置中. 包住文字的容器(以下通稱父容器) 給他text-align: center .textBox{ text-align: center; } ...

文字

GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWriteCSS垂直置中/水平置中（持續新增）超級重要但永遠記不住的CSS置中方式！css置中說明看到一個紀錄一個，持續更新，分為文字/區塊，在細分為垂直或水平。

懶的看的話可以直接跳到重點—水平垂直置中flex水平垂直置中margin+position文字水平置中包住文字的容器(以下通稱父容器)給他text-align:center.textBox{text-align:center;}...

文字

2.table+margin(用於父級元素寬度不固定，子級元素寬度也不固定).parent{}.child{display:table;margin:0auto;}...DEMO3.absolute+transform.parent{}.child{position:absolute;left:50%;transform:translateX(-50%);}...DEMO4.flex+justify-content.parent{display:flex;justify-content:center;}.child{}...DEMO5.flex+margin.parent{display:flex;}.child{margin:0auto;}...DEMO垂直置中父容器設定高度後給定line-height（常用於選單文字垂直置中）.textBox{background-color:#c7ff91;width:300px;height:100px;line-height:100px;}...

文字

補充多行文字的垂直置中.box{width:500px;border:1pxsolid#f00;margin:auto;line-height:200px;text-align:center;}.content{display:inline-block;height:auto;line-height:1;width:400px;background:#ccc;vertical-align:middle;}...

aaaaa

區塊水平置中flex.container{display:flex;justify-content:center;border:2pxsolidblack;height:50vh;}.box{width:100px;height:100px;border:2pxsolidrgb(255,0,0);}...垂直置中flex兩個重要屬性align-content:center;flex-wrap:wrap;.container{display:flex;border:2pxsolidblack;height:50vh;align-content:center;flex-wrap:wrap;}.box{width:100px;height:100px;border:2pxsolidrgb(255,0,0);}...（flex真好用）1.2Flex+align-items(優點是此層不需設定高度即可自動置中).container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;display:flex;justify-content:center;align-items:center;}.box{width:400px;background:#ccc;}...hello

aaaaaa

1.3Flex+margin.container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;display:flex;}.box{width:400px;background:#ccc;margin:auto;}...hello

aaaaaa

2.margin(tips:給定寬度後margin:0auto)（常用適用於RWD）.box{height:100px;border:2pxsolidrgb(255,0,0);width:200px;margin:0auto;}...text圖片也可以（但文字不行）3.padding（給寬度後用padding推推）.container{border:2pxsolidrgb(255,0,0);padding:4em0;width:500px;text-align:center;}...

asdasdasaaaa

4.position（絕對位置後要用margin調整回中間）（寬高的1/2）.container{border:2pxsolidrgb(255,0,0);text-align:center;width:400px;height:200px;position:absolute;top:50%;left:50%;margin:-100px00-200px;}...

aaaaaaaaaaaaaa

5.transform-範例1.container{height:100vh;}.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1pxsolid#000;}...

bbbbbbbbbbbbbbb

-範例2（父元件position:relative;子元件position:absolute;）.container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;position:relative;}.box{width:400px;background:#ccc;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}...hello

aaaaaa

5.calc.container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;}.box{width:400px;background:#ccc;position:relative;top:calc((100%-70px)/2);margin:auto;height:70px;}...hello

aaaaaa

6.相對定位Relative+translateY.container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;}.box{width:400px;background:#ccc;position:relative;top:50%;transform:translateY(-50%);margin:auto;}...hello

aaaaaa

7.::before+inline-block.container{width:500px;height:250px;border:1pxsolid#f00;margin:auto;text-align:center;}.container::before{content:"";display:inline-block;height:100%;width:0;vertical-align:middle;}.box{width:400px;background:#ccc;display:inline-block;vertical-align:middle;}...hello

aaaaaa

8.圖案是圓形的範例(父層給display:flex子:margin:auto).container{width:600px;height:300px;border:1pxsolid#f00;/*margin:auto;*/display:flex;}.box{width:100px;height:100px;border:6pxsolidrgb(128,100,100);border-radius:50%;margin:auto;}...結合水平垂直置中position+transform.parent{position:relative;}.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}...DEMO2.flex.parent{display:flex;justify-content:center;align-items:center;}.child{}...DEMOflex3.margin+position.parent{position:relative;border:1pxgreensolid;width:600px;height:600px;}.child{position:absolute;border:1pxredsolid;width:300px;height:300px;top:50%;left:50%;margin:-150px00-150px;/*text-align:center;line-height:300px;文字(demo)要置中就加這兩條*/}...DEMOmargin+position水平+垂直置中的三種方法ans:一.display:flex;align-items:center;justify-content:center;二.text-align:center;line-height:height/2三.parent{display:flex;}child{margin:auto;}*水平垂直置中transform該方法可以不定寬高.father{position:relative;}.son{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}2.該方法必須盒子有寬高.father{position:relative;}.son{position:absolute;top:0;left:0;right:0;bottom:0px;margin:auto;height:100px;width:100px;}3.該方法必須盒子有寬高.father{position:relative;}.son{position:absolute;left:50%;top:50%;width:200px;height:200px;margin-left:-100px;margin-top:-100px;}4.flex.father{display:flex;justify-content:center;align-items:center;}完成٩(ˊᗜˋ)و--MorefromMollyMFollowMolly—SoftwareDeveloper/職稱是軟體工程師的前端+微後端。

因為健忘所以用Medium紀錄，持續ㄉ慢慢前進(ง•̀_•́)ง❤Contactme:[email protected]?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedMollyM81FollowersMolly—SoftwareDeveloper/職稱是軟體工程師的前端+微後端。

因為健忘所以用Medium紀錄，持續ㄉ慢慢前進(ง•̀_•́)ง❤Contactme:[email protected] — SyntacticallyAwesomeStyleSheetsDanielDelgadoBreadcrumbs…Notjustforthebirds!YuvrajAgarkarYourveryfirstSassproject !!WhatisSass?Howtouseit ?RaquelFraktasSCSS/SASS-SyntacticallyAwesomeStyleSheetsthatareactuallyawesomeHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable