css居中是什麼代碼?我是poetry，點擊上方“關注”，每天為你分享前端進階與個人精進幹貨，下面我們就來說一說關于css居中是什麼代碼?我們一起去了解并探讨一下這個問題吧!

css居中是什麼代碼

我是poetry，點擊上方“關注”，每天為你分享前端進階與個人精進幹貨。

<div id="parent1"> <div class="child">水平居中</div> </div>

#parent1{ text-align: center; background:#ddd; margin-bottom:20px; } #parent1 .child{ display: inline-block; background:#666; color:#fff; }

<div id="parent2"> <div class="child">水平居中</div> </div>

#parent2{ text-align: center; background:#ddd; margin-bottom:20px; } #parent2 .child{ display: table; margin: 0 auto; background:#666; color:#fff; }

<div id="parent3"> <div class="child">水平居中</div> </div>

#parent3{ position: relative; background:#ddd; margin-bottom:20px; } #parent3 .child{ position: absolute; left: 50%; transform: translateX(-50%); background:#666; color:#fff; }

<div id="parent4"> <div class="child">水平居中</div> </div>

#parent4{ display: flex; justify-content: center; background:#ddd; margin-bottom:20px; } #parent4 .child{ margin:0 auto; background:#666; color:#fff; }

• 這種方法适用于單行文本垂直居中,如果文本内容太長，出現了換行，換行後的内容會溢出

<div id="example1"> 單行文字垂直居中 </div>

#example1 { height: 100px; line-height: 100px; background: #161616; color: #fff; width: 200px; }

<div id="example2"> <div class="inner">塊區域垂直居中</div> </div>

#example2 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; display: table; margin-bottom:20px; } #example2 .inner{ display: table-cell; vertical-align: middle; height: 50px; background:#999; }

<div id="example3"> <div class="inner">塊區域垂直居中</div> </div>

#example3 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; margin-bottom:20px; } #example3 .inner{ margin-left: auto; margin-right: auto; margin-top: calc((100px - 50px)/2); height: 50px; background:#999; }

<div id="example4"> <div class="inner">塊區域垂直居中</div> </div>

#example4 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; margin-bottom:20px; } #example4 .inner{ height: 50px; width: 200px; position: absolute; left: 50%; top: 50%; margin-top: -25px; margin-left: -100px; background:#999; }

<div id="example5"> <div class="inner">塊區域垂直居中</div> </div>

#example5 { width: 400px; height: 100px; background: #161616; color: #fff; position: relative; margin-bottom:20px; } #example5 .inner{ position: absolute; left: 50%; top: 50%; background: #999; transform: translateX(-50%) translateY(-50%); }

<div id="expample6"> <div class="inner">Content here</div> </div>

#expample6 { width: 400px; height: 100px; background: #eee; position: relative; margin-bottom:20px; } #expample6 .inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 70%; background: #aaa; color:#222; }

<div id="expample7"> <div class="inner">Content here</div> </div>

#expample7 { width: 400px; height: 100px; background: #eee; display: flex; justify-content: center; align-items: center; } #expample7 .inner { height: 50px; width: 70%; background: #aaa; color:#222; }

作者介紹：poetry，專注前端進階寫作與個人精進幹貨，目前在上市公司負責小程序等相關的研發。