理解CSS居中
我想很多在前端学习或者开发过程中，肯定会遇到如何让你的元素居中的问题，网上google肯定会有很多的解决方法。今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中。
要理解css的居中，首先必须理解css的元素分类以及css的盒模型(box model)。
a. 元素分类。
在css中把元素分为块级元素、内联元素以及内联块级元素。
块级元素最明显的特征就是: { display: block; } 。块级元素独占一行，默认情况元素的width默认为100%，但可以修改元素的height, width等样式；例如html中的<div>, <p>, <ul>, <li>, <hx>, <form>等。
内联元素最明显的特征是 { display: inline; } 。也叫行内元素，可以与其他行内元素共享一行，但是其height, width, margin-top, margin-bottom均不可设置。例如html中的<span>, <a>, < label>, <input>等。
内联块级元素，也就是行内块级元素 { display: inline-block; } 。顾名思义，内联块级元素既有块级元素的特征，也有内联元素的特征。也就是inline-block可以与其他元素共享一行，也可以设置height, width等样式。
b. 盒模型(box model)。
在css中，所有的元素都有盒模型，打开chrome审查任何一个网页的元素都会看到一个盒模型。
图1. css盒模型
正如图1所示，一个盒模型有margin, border, padding以及盒子本身的尺寸(height, width)，从字面量上通俗地讲就是（多个）盒子的间距、盒子的边框、盒子内的填充、以及盒子的宽、高。我们可以通过css修改这些样式，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 300px;
}
div.box-model{
margin: 10px;
padding: 10px;
border: solid 2px;
width: 100px;
height: 60px;
display: inline-block;
background: #999;
}
</style>
</head>
<body>
<div>
<div class="box-model">div1</div>
<div class="box-model">div2</div>
<div class="box-model">div3</div>
<div class="box-model">div4</div>
</div>
</body>
</html>
图2. css盒模型样式的修改
接下来讲如何对一个元素进行居中：
1.水平居中：
1.1内联元素的居中
对内联元素居中只需要给其父元素设置 {text-align: center; } 即可；
2.2块级元素
2.2.1宽度固定；若块级元素的宽度是固定的可以同时设置其左右的边距 { margin-left: auto; margin-right: auto; } 为自动让其居中；
2.2.2宽度不定，我们在开发过程中，我们块级元素的宽度大多数是不固定的，对宽度未知的块级元素有很多种方法，现在主要讲一些方法，最主要的是其思想，大家一定要注意体会其思想。
a.利用<table>标签；将元素放在<td>中，给table增加样式 { margin-left: auto; margin-right: auto; }
b.将块状元素修改为内联元素利用内联元素的方法，即修改元素的 { display: inline; } ，并修改其父元素的 {text-align: center; } 。
c.给父元素设置float，并设置 { float:left; position:relative; left:50%; } ，在给该块级元素设置 { position:relative; left:-50%; } 即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.width-block{
width: 200px;
margin-left: auto;
margin-right: auto;
background: #9cc;
}
table{
margin:0 auto;
}
table div{
background: #9cc;
}
.float-father{
float: left;
position: relative;
left: 50%;
}
.float{
position: relative;
left: -50%;
background: #fcc;
}
</style>
</head>
<body>
<div>
<div class='width-block'>div center with width</div>
</div>
<table>
<tbody>
<tr>
<td>
<div>div center with table</div>
</td>
</tr>
</tbody>
</table>
<div class='float-father'>
<div class='float'>
div with float father
</div>
</div>
</body>
</html>
总结：
方法a：虽然实现了块级元素的居中，但是却增加了没有语义的标签。
方法b：改变了标签元素特性，使其成为了内联元素，使得其失去了块状元素的固有特性，如height, width等。
方法c：设置了position为relative，且改变了其层模型属性。
2.垂直居中：
2.1 父元素高度确定的情况下单行文本：只要设置其父元素的line-height与其高度一致即可；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div1{
height: 100px;
background: #fcc;
line-height: 100px;
border: solid;
}
</style>
</head>
<body>
<div id='div1'>
<div>single line text</div>
</div>
</body>
</html>
2.2 父元素高度确定的多行文本
a. 利用<table>标签，css中有一个用于垂直居中的属性vertical-align，但是这个样式只有在table标签中的th或者td中才会生效。因此借助table标签可以使元素垂直居中；
<table>
<tbody>
<tr>
<td>
<div>
<div>text1</div>
<div>text2</div>
<div>text3</div>
</div>
</td>
</tr>
</tbody>
</table>
td{
height: 200px;
vertical-align: middle;/*td默认为middle,可以不设置 */
}
b. 利用 { display: table-cell; } ，其实也是跟方法a类似，这里是通过display来激活vertical-align属性，但是IE8以前的浏览器不支持table-cell。与a方法不同的是这里需要显示去设置 { vertical-align: middle; } 。
<div id="table-cell">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
#table-cell{
display:table-cell;
vertical-align:middle;
height:200px;
background:#fcc;
border: solid;
}
2.3高度不确定
可以设置父元素的padding对top和bottom一致 { padding-top: 50px; padding-bottom: 50px; } 来控制元素的垂直居中，但是必须是父元素能够设置padding-top和padding-bottom，也就是父元素为行内元素肯定不行。
<div class='bypadding'>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
</div>
.bypadding{
padding:50px 0;
border:solid;
background: #fcc;
}
总结，在常用CSS居中的解决方法中，我们需要理解css的块级元素、内联元素，并在解决过程中巧妙运用块级元素以及内联元素的特性，有时候可以借助table标签的特性。
文章地址：http://www.cnblogs.com/alvinwei1024/p/4616322.html
理解CSS居中的更多相关文章
- css居中小结
从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...
- 深入理解CSS中的margin
1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 理解CSS
写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- 深入理解css BFC 模型
如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]
深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
随机推荐
- C++ builder 操作Excel方法（据网上资料整理）
c++ builder 操作Excel方法,下面是从网上找到的一些不错的方法,学习一下: 用OLE操作Excel(目前最全的资料)(04.2.19更新) 本文档部分资料来自互联网,大部分是ccrun( ...
- grep,awk和sed的常用命令和语法
Grep的常用命令语法 1. 双引号引用和单引号引用在g r e p命令中输入字符串参数时,最好将其用双引号括起来.例如:“m y s t r i n g”.这样做有两个原因,一是以防被误解为 s h ...
- mq队列管理器命令
dspmq: 队列管理器显示 QMCIPSA-------队列管理器 runmqsc QMSAA 运行查找Q队列名 运行MQ命令 runmqsc QmgrName 如果是默认队列管理器,可以不带其名 ...
- 如何给WordPress安装百度统计代码
1.注册并登录百度统计,点击页面顶部的“网站中心”,然后点击右上角“+ 新增网站”,填写网站域名确定后,点击“复制代码”:2.登录 WordPress 后台,点击左侧导航栏“外观”里的“编辑”,然后点 ...
- jquery图片轮播，单张图片轮播时间不同
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 登陆peoplesoft的时候显示信息
Signon Event Message Select selectPeopleTools, then selectUtilities, then selectAdministration, then ...
- java基础知识梳理
java基础知识梳理 1 基本数据类型
- 【Servlet】—在servlet中常混的请求路径
在页面请求,后台获取相关请求路径是,自己长搞混的几个路径,再次做次标记,不要每次使用想不起来是,都去写一个小的demo来测试. request.getContextPath(); request.ge ...
- STM32F0xx_TIM基本延时配置详细过程
前言 关于定时器大家都应该不会陌生,因为处理器都有这个功能.今天总结的F0系列芯片的定时器根据芯片型号不同,数量也不同.定时器分类:基本定时器.通用定时器和高级定时器.计数位数也有不同,有16位的,有 ...
- 在WPF中调用Winform控件
最近在项目中用到了人脸识别和指纹识别,需要调用外部设备和接口,这里就用到了在WPF中调用Winform控件. 第一步,添加程序集引用.System.Windows.Forms和WindowsForms ...