前端工具:MyCodepen】| 【W3School】| 【Bootstrap】| 【MarkDown】| 【正则表达式】| 【图标下载】| 【在线工具】| 【W3标准及兼容】| 【前端中文文档

CSS实现不固定宽度和高度的自动居中

有时候我们需要实现下面这种效果:

嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
嘎嘎,撑大高度不让你剧中
我要居中

直接上代码:

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%;
}
posted @ 2015-07-29 10:10  FuGardenia  阅读(1011)  评论(0编辑  收藏  举报

关于我们

喜欢编程。
上大学四年,一直在探索。
最终走上前端工程师的不归路。


我的微博:

@WOOEOOBOO

GitHub:

@FuGardenia

关注我们

微信号:MoveClouds
移动互联网,云前端信息传播自媒体。

Simple is beauty,Less is more.

简而美,少即多。