一、水平居中

.hor_center {
margin: 0 auto;
}

二、水平垂直居中

.content {
width: 360px;
height: 240px;
}
.ver_hor_center {
position: absolute;
top: 50%;
left: 50%;
margin-left: -180px; /*要居中的div的宽度的一半*/
margin-top: -120px; /*要居中的div的高度的一半*/
}

三、div置于底部(footer)

.bottom_footer {
position: fixed; /*or前面的是absolute就可以用*/
bottom: 0px;
}
 

CSS div水平垂直居中和div置于底部的更多相关文章

  1. 解读CSS布局之-水平垂直居

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...

  2. CSS 布局 - 水平 & 垂直对齐

    CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...

  3. CSS:CSS 布局 - 水平 & 垂直对齐

    ylbtech-CSS:CSS 布局 - 水平 & 垂直对齐 1.返回顶部 1. CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个 ...

  4. CSS实现水平垂直同时居中的5种思路

    × 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...

  5. CSS实现水平垂直同时居中的6种思路

    前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...

  6. HTML/CSS:div居中和div内部元素垂直居中(1)

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  7. img外头包着a时底部出现的一小段高度的解决方法。图片水平垂直居中用css解决的方法。

    <a><img/></a> 这种结构有时候在界面预览的时候会出现一段多出来的高度.这个高度,一开始我很奇怪是什么原因产生的.鼠标移动到a标签上会有高度出现,一开始我 ...

  8. margin:-75px的理解及妙用——纯CSS制作水平/垂直都居中短边为50px/长边为150px的红色十字架

    有这么一个题目: 使用重构的方式制作出一个如下图的水平.垂直都居中短边为50px,长边为150px的红色十字架. 要求只使用2个div完成 答案: <!DOCTYPE html PUBLIC & ...

  9. CSS文字垂直居中和font-family属性

    1.单行文字的垂直居中 单行文字垂直居中比较简单,直接让行高==盒子高度即可. 2.多行文字居中 多行文字居中,只需简单计算一下盒子的上padding即可.计算公式:padding-top=(盒子的高 ...

随机推荐

  1. UITableView或UIScrollVIew上的UIButton的高亮效果

    UITableView或UIScrollVIew上的UIButton的高亮效果 原文地址:http://www.jianshu.com/p/b4331f06bd34 最近做项目的时候发现,UIScro ...

  2. iOS开发之功能模块--推送之坑问题解决

    不管想不想看我后面再开发中总结的经验,但是很值得推荐一位大神写的关于苹果推送,很多内容哦:http://www.cnblogs.com/qiqibo/category/408304.html 苹果开发 ...

  3. ORA-01078: failure in processing system parameters & LRM-00109: could not open parameter file

    安装了Oracle 12C后,启动数据库的过程中出现如下错误 SQL> startup ORA-01078: failure in processing system parameters LR ...

  4. 初探ansible安装

    一.ansible介绍常用的自动化运维工具 Puppet —基于 Ruby 开发,采用 C/S 架构,扩展性强,基于 SSL,远程命令执行相对较弱SaltStack —基于 Python 开发,采用 ...

  5. SpringMVC 处理异常的4种方式

    springmvc处理异常有三种方式: 1.在一个controller中定义一个方法,用@ExceptionHandler注解标注.(优先级最高) @ExceptionHandler public M ...

  6. PHP笔记(PHP初级篇)

    学习完HTML和CSS后,终于要开始学习PHP啦!前面的铺垫只为后路的畅顺! PHP环境搭建: 企业中常用到的环境是:Linux+Apache+MySQL+PHP 学习环境是:Windows+Apac ...

  7. [Java入门笔记] Java语言基础(四):流程控制

    流程控制指的是在程序运行的过程中控制程序运行走向的方式.主要分为以下几种: 顺序结构 顺序结构,顾名思义,是指程序从上往下逐步顺序执行.中间没有任何的判断和跳转. 分支结构 Java提供两种分支结构: ...

  8. Android开发究竟用什么工具,Eclipse||AS

    所谓公欲善其事必先利器,那就让我们来看一下android的开发工具吧,安卓的开发工具有Eclipse和Android Studio,另外还有IntelliJ IDEA,可能很多人并不知道. 首先看一下 ...

  9. 关于stm32定时器的理解

    TIM_OCInitStructure.TIM_OCPolarity = TIM_OCPolarity_High; 表面意思是输出控制极性为高,但是意思是定时器输入0,不反相,输出0: 输出控制极性为 ...

  10. 每天一个linux命令(1):ls命令

    1. 命令格式: ls [选项] [目录名] 2. 命令功能: 列出目标目录中所有的子目录和文件. 4. 常用范例: 例一:列出/home/peidachang文件夹下的所有文件和目录的详细资料 命令 ...