1.行内元素（图片、文本）水平居中

　　通过给父元素设置 text-align:center

html代码：

<body>

  <div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

css代码：

<style>

  .txtCenter{

    text-align:center;

  }

</style>

2.定宽块状元素水平居中：块状元素的宽度width为固定值

　　设置“左右margin”值为“auto”来实现

html代码：

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

css代码：

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

3.不定宽块状元素水平居中：块状元素的宽度width不固定

　　1）加入 table 标签

　　　　利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中

html代码：

<div>

 <table>

  <tbody>

    <tr><td>

    <ul>

        <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

 </table>

</div>

css代码：

<style>

table{

    border:1px solid;

    margin:0 auto;

}

</style>

　　2）设置 display：inline 方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center

html代码：

<body>

<div class="container">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

</body>

css代码：

<style>

.container{

    text-align:center;

}

/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    display:inline;

}

/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

    margin-right:8px;

    display:inline;

}

</style>

　　3）设置 position：relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

　　　　通过给父元素设置 float ，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中

<div class="outer">

   <div class="wrap">

     <div class="inner"></div>

   </div>

</div>

CSS代码为

.wrap{

    float:left;

    position:relative;

    left:50%;

}

.outer{

    width:300px;

    height:400px;

    background:#FFCC99;

}

.inner{

    width:100px;

    height:100px;

    background:#C33;

    position:relative;  /*????*/

    left:-50%;

}

4.父元素高度确定的单行文本垂直居中

　　设置父元素的 height 和 line-heigh 高度一致来实现

<div class="container">

    hi,imooc!

</div>

css代码：

<style>

.container{

    height:100px;

    line-height:100px;

    background:#999;

}

</style>

5.父元素高度确定的多行文本、图片垂直居中

　　使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle

html代码：

<body>

<table><tbody><tr><td class="wrap">

<div>

    <p>看我是否可以居中。</p>

</div>

</td></tr></tbody></table>

</body>

css代码：

table td{height:500px;background:#ccc}

css样式设计的更多相关文章

  1. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  2. bootstrap学习总结-css样式设计(二)

    首先,很感谢各位园友对我的支持,关于bootstrap的学习总结,我会持续更新,如果有写的不对的地方,麻烦各位给我指正出来哈.关于上篇文章,固定布局和流式布局很关键,如果还不太清楚的可以再看看我写的h ...

  3. css 样式设计（一）（ 在线150个例子 | 背景 | 文本 | 字体 | 链接 | 列表 | 表格 | 盒模型 | 边框 | 轮廓 | 边距 | 填充 |分组和嵌套 | 尺寸 | 定位 | 浮动 |对齐 ）

    一.css在线150个例子 http://www.w3cschool.cc/css/css-examples.html 二.背景图片水平方向重复 : body { background-image:u ...

  4. 响应式设计：根据不同设备引不同css样式

    <link rel="stylesheet" media="screen and (max-width:600px)" href="small. ...

  5. Bootstrap3 CSS样式基本用法总结

    按钮 a,input,button都可以设置为按钮 a标签按钮   button标签按钮 <a class="btn btn-default" href="#&qu ...

  6. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  7. 记一次项目中的css样式复用

    本文同步至微信公众号:http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401616238&idx=1&sn=3c6e9 ...

  8. Csstyle - 创建简洁、可维护强的 CSS 样式

    Csstyle 是一种现代的方式,用于制作精美的可维护样式表.这个 Csstyle 方法使用 SASS 混入,使你的 CSS 更具可读性和语义,并为你生成选择器,自动处理嵌套等事情. Csstyle ...

  9. CSS样式----图文详解（二）：css属性

    主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 ...

随机推荐

  1. ActiveMq池

    有两种连接方式 1.Spring  引用 <!-- 配置JMS连接工厂 --> <bean id="connectionFactory" class=" ...

  2. Windows server 2008 R2搭建主域控制器 + 辅域控制器

    一:实验模拟环境: Zhuyu公司是一个小公司,随着公司状大,公司越来越重视信息化建设,公司考虑到计算机用户权限集中管理及共享资源同步管理, 需要架设一套AD域控服务器,考虑到成本和日后管理问题,计划 ...

  3. 移动端网站或APP点击后出现闪动或灰色背景（转）

    遇到这个问题了,记录下,备用~ 文章来源:http://www.lxway.com/846165591.htm --------------------------- 隐藏文本框阴影:(去除文本框默认 ...

  4. [原创]java WEB学习笔记98：Spring学习---Spring Bean配置及相关细节：如何在配置bean，Spring容器（BeanFactory,ApplicationContext），如何获取bean，属性赋值（属性注入,构造器注入），配置bean细节（字面值,包含特殊字符，引用bean，null值，集合属性list map propert），util 和p 命名空间

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. spring使用elasticsearch 5.x

    elasticsearch客户端选择 这里使用transport建立elasticsearch客户端 applicationContext.xml配置,属性可以采用读取属性文件的方式.参考类Prope ...

  6. 运行TLD

    TLD(跟踪学习检测)是英国萨里大学的捷克学生Zdenek Kalal在其2010的一篇论文中提出的实时性较好的单目标长时间跟踪算法.其主页上有相关的文章下载,源码是从这里下载的,还可以找到安装步骤, ...

  7. Elementory os install .net core

    ref link : https://www.microsoft.com/net/core#linuxubuntu sudo sh -c 'echo "deb [arch=amd64] ht ...

  8. ASP.NET下载远程图片保存到本地的方法、保存抓取远程图片

    以下介绍两种方法:1.利用WebRequest,WebResponse 类 WebRequest wreq=WebRequest.Create("http://www.xueit.com/e ...

  9. 覆盖的面积(HDU 1255 线段树)

    覆盖的面积 Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Problem D ...

  10. bat 自动编译运行

    @echo off g++ %1 -Wall -Wextra --std=c++98 -O3 -DNDEBUG -D_NDEBUG -D_GLIBCXX_NO_ASSERT ^ -U_STLP_DEB ...