有時(shí)候我們需要實(shí)現(xiàn)下面這種效果：

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中

嘎嘎，撐大高度不讓你劇中




我要居中

直接上代碼：

html:

<div class="main"><div class="left">嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/> 嘎嘎，撐大高度不讓你劇中<br/></div><div class="right"><span>我要居中</span></div></div>

css:

* {padding: 0;margin: 0; } .main {width: 100%;display: table; } .left {text-align: center;vertical-align: middle;display: table-cell;width: 50%;box-sizing: border-box;border: 1px solid #ddd; } .right {display: table-cell;vertical-align: middle;text-align: center;width: 50%;box-sizing: border-box;border: 1px solid #ddd;//針對(duì)ie6的hack_position: absolute;_top: 50%; } .right span {//針對(duì)ie6的hack_position: relative;_top: -50%; }

由 ie6 hack 想到的 內(nèi)容不確定高度寬度的居中：

內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中, 內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中

html:

<div class="center-main"><div class="center-content"><span>內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中, 內(nèi)容居中,內(nèi)容居中,內(nèi)容居中,內(nèi)容居中</span></div> </div>

css:

* {padding: 0;margin: 0; } html, body {width: 100%;height: 100%; } .center-main {width: 100%;height: 100%;position: absolute; } .center-content {position: relative;text-align: center;top: 50%; } .content span {top: -50%; }

轉(zhuǎn)載于:https://www.cnblogs.com/yunqianduan/p/4685163.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CSS实现不固定宽度和高度的自动居中的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。