1、单行垂直居中

  文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

Example Source Code [www.52css.com]
<div style="line-height:500px;height:500;"></div>

2、层水平居中

  设置div的宽度小于父div的宽度,设置 margin:0 auto;,即可让div居中。

Example Source Code [www.52css.com]
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
}

3、层中的文字水平居中

  在childdiv的css加上text-align:center;

Example Source Code [www.52css.com]
#parentdiv
{
width: 500px;
}
#childdiv {
width: 200px;
margin:0 auto;
text-align:center;
}

4、div层垂直居中

Example Source Code [www.52css.com]
<div style="width:275px;height:375px;border: solid red;">
   <div style=" background:green;height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
      <div style=" background:red;position:static;position:absolute\9; top: 50%;">
    <div style=" background:blue;position: relative; top: -50%;">
www.52css.com
    </div>
   </div>
  </div>
</div>

5、div层垂直水平居中,英文超长换行

Example Source Code [www.52css.com]
<div style="float:left;width:275px;height:375px;border: solid red;">
<div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
<div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; text-align: center;">
<div style="width: 85px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;margin:0 auto;">
      www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com
  </div>
</div>
</div>
</div>
</div>

6、div垂直滚动

Example Source Code [www.52css.com]
<div style="width: 160px; height: 260px; overflow-y: scroll; border: 1px solid;">
</div>

7、垂直居中和使用text-align水平居中

Example Source Code [www.52css.com]
<div style="float:left;width:275px;height:375px;border: solid red;">
  <div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="position:static;position:absolute\9;top: 50%;">
<div style="position: relative; top: -50%; text-align:center;">
          <div style="width: 275px;">
<div style="width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;text-align:left;">
          www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com
     </div>
  </div>
</div>
    </div>
  </div>
</div>

8、垂直居中和使用margin水平居中

Example Source Code [www.52css.com]
<div style="float:left;width:275px;height:375px;border: solid red;">
  <div style=" height: 375px; width: 275px; position: relative; display: table-cell; vertical-align: middle;">
    <div style="position:static;position:absolute\9; top: 50%;">
<div style="position: relative; top: -50%; ">
  <div style="margin:0 auto;width: 160px;WORD-WRAP: break-word;TABLE-LAYOUT: fixed;word-break:break-all;">
     www.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.comwww.52css.com
</div>
</div>
</div>
</div>
</div>
 

CSS实例:水平居中和垂直居中的多种解决方案的更多相关文章

  1. CSS的水平居中和垂直居中解决方案

    在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...

  2. 主流 CSS 布局(水平居中、垂直居中、居中 )

    什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...

  3. 【CSS】水平居中和垂直居中

    水平居中和垂直居中 2019-11-12  15:35:37  by冲冲 1.水平居中 (1)父级元素是行内元素,子级元素是行内元素,子级元素水平居中 ① 设置父级元素为块级元素 display:bl ...

  4. css的水平居中和垂直居中总结

    Html代码: <div class="md-warp"> <div class="md-main">块级元素</div> ...

  5. css:元素水平垂直居中的多种方式

    CSS元素(文本.图片)水平垂直居中方法   1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:ce ...

  6. CSS:水平居中与垂直居中

    CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中. 水平居中 1.行内元素 行内元素(主 ...

  7. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

  8. CSS元素水平居中和垂直居中的方法大全

    水平居方法: 1.最熟悉的是给元素定义一个宽度,然后使用margin: body{ width:960px; margin:0 auto;}这个是当我们的定义元素的宽度时显现的,如果我们不能定义宽度时 ...

  9. 在CSS中水平居中和垂直居中:完整的指南

    这篇文章将会按照如下思路展开: 一.水平居中 1. 行内元素水平居中 2. block元素水平居中 3. 多个块级元素水平居中 二.垂直居中 1. 行内元素水平居中 2. block元素水平居中 3. ...

随机推荐

  1. 8.6中关于PSNR(峰值信噪比), img->quad的解释

    在JM代码中,多次遇到img->quad这个东西,而在官方代码中只给出了一句说明: 我开始看了好几遍都没有看懂,然后看到后面有snr,所以想应该和snr有关吧. 然后再代码中寻找snr,发现jm ...

  2. MVC 授权过滤器 AuthorizeAttribute

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  3. 在Vim中查看文件编码

    :set fileencoding 即可显示文件编码格式. 如果你只是想查看其它编码格式的文件或者想解决 用Vim查看文件乱码的问题,那么在 ~/.vimrc 文件中添加以下内容: set encod ...

  4. F - The Circumference of the Circle

    Description To calculate the circumference of a circle seems to be an easy task - provided you know ...

  5. MyEclipse破解方法

    Myeclipse 2014 破解补丁,首先需要先下载 Myeclipse 2014 官方安装文件,下载地址 http://www.jb51.net/softs/150886.html,然后下载此补丁 ...

  6. push() & concat()

    eg. var arr = []; arr.push(1); arr.push([2, 3]); arr.push(4, 5); arr = arr.concat(6); arr = arr.conc ...

  7. sqlite数据库常用语句

    这个文件型数据库小巧好用,可以替代ACCESS,以下是常用的语句 获取数据库时间(设计表字段时的当前时间默认值) sqlite        datetime('now', 'localtime') ...

  8. Raknet实现的简单服务器与客户端的交互

    1. 首先下载Raknet的源代码,我用的是4.0的,不是最新的,解压后编译DLL工程,编译完成后进入解压的根目录下,进入Lib文件夹下找到RakNet_DLL_Debug_Win32.dll,  R ...

  9. MVC4商城项目一:框架设计

    代码已托管在  https://code.csdn.net/denghao156/ktnmb_mvc4 先上图,设计模式参考:ddmvc4.codeplex.com 一.unintofwork  设计 ...

  10. QProgressBar和QProgressDialog的简单实用

    在QT中可以用QProgressBar或着QProgressDialog来实现进度条. QProgressBar的使用 首先在designer中拖一个按钮和进度条部件,按下面初始化 ui->pr ...