有時候我們需要實現下面這種效果：

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

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

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

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

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

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

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




我要居中

直接上代碼：

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;//針對ie6的hack_position: absolute;_top: 50%; } .right span {//針對ie6的hack_position: relative;_top: -50%; }

由 ie6 hack 想到的 內容不確定高度寬度的居中：

內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中, 內容居中,內容居中,內容居中,內容居中

html:

<div class="center-main"><div class="center-content"><span>內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中,內容居中, 內容居中,內容居中,內容居中,內容居中</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%; }

轉載于:https://www.cnblogs.com/yunqianduan/p/4685163.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。