CSS布局——居中
参考文章1.CSS布局奇淫技巧之--各种居中 2.http://www.imooc.com/article/2235
1.行内元素水平居中text-align:center
对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中，可对元素或者父元素使用text-align:center
2.定宽块级元素水平居中margin: 0 auto;
.container{
width:500px; /* 元素设置定宽*/
height: 200px;
margin:0 auto;/*margin-left和margin-right设置为auto*/
background-color: aquamarine;
}
3.使用表格垂直水平居中
如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用，对块状元素无效，需要设置display。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格居中</title>
<style type="text/css" >
body{
padding:0;
margin:0;
} .parent{
vertical-align: middle;
text-align: center;
width: 200px;
height:200px;
margin:0 auto;
background-color: pink;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: deeppink;
}
</style>
</head>
<body>
<table >
<tr>
<td class="parent">
<div class="child"></div>
</td>
</tr>
</table> </body>
</html>
4.使用display:table;margin:0 auto;水平居中
.child{
display: table;
width: 100px;
height: 100px;
margin:0 auto;
background-color: deeppink;
}
5.使用display:table-cell垂直水平居中
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格的居中特性。但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div居中</title>
<style type="text/css" >
body{
padding:0;
margin:0;
} .parent{
display:table-cell;
vertical-align: middle;
text-align: center;
width: 200px;
height:200px;
margin:0 auto;
background-color: pink;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: deeppink;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div> </body>
</html>
效果为
6.单行或多行文本的垂直居中
父元素高度确定的情况下，
单行文本设置父元素的height和line-height一致即可；
多行文本在使用vertical-align:middle的时候，由于对齐的基线是用行高的基线作为标记，故需要设置line-height或设置display:table-cell;
7.绝对定位垂直水平居中
此法只适用于那些我们已经知道它们的宽度或高度的元素。
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
垂直水平居中
.parent{
position:relative;/*父元素相对定位*/
width: 500px;
height:300px;
background-color: pink;
}
.child{
position: absolute;
left:50%;
top:50%;
width: 300px;
height: 200px;
margin: -100px 0 0 -150px;/*margin-left为child宽度的一半，margin-top为child高度的一半*/
background-color: deeppink;
}
8.另一种绝对定位居中
此法同样只适用于那些我们已经知道它们的宽度或高度的元素，并且遗憾的是它只支持IE9+,谷歌，火狐等符合w3c标准的现代浏览器。
.parent{
position:relative;/*父元素相对定位*/
width: 500px;
height:300px;
background-color: pink;
}
.child{
position: absolute;
width: 300px;/*宽高需要固定*/
height: 200px;
left:;
right:;/*left和right必须配对出现来控制水平方向，top、bottom同理*/
top:;
bottom:;
margin:auto;/*这句也是需要的，0 auto水平居中，auto 0 垂直居中*/
background-color: deeppink;
}
9.flex布局垂直水平居中
flex布局语法和实例参考阮一峰的博文：Flex 布局教程：语法篇、Flex 布局教程：实例篇
.parent{
display:flex;
justify-content:center;
align-items:center;
width: 500px;
height:300px;
background-color: pink;
}
.child{
width: 300px;
height: 200px;
background-color: deeppink;
}
CSS布局——居中的更多相关文章
- CSS布局---居中方法
在web页面布局中居中是我们常遇到的情况,而居中分为水平居中与垂直居中 文本的居中 CSS中对文本的居中做的非常友好,我们是需要text-align, line-height 两个属性就可以控制文本的 ...
- CSS布局居中
1.把margin设置为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效.
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- CSS 布局实例系列（一）总结CSS居中的多种方法
使用 CSS 让页面元素居中可能是我们页面开发中最常见的拦路虎啦,接下来总结一下常见的几种居中方法吧. 1. 首先来聊聊水平居中: text-align 与 inline-block 的配合 就像这样 ...
- css布局之居中
CSS布局之居中 本文主要是介绍水平居中,垂直居中,还有水平垂直居中的方法 水平居中 1.行内元素水平居中 使用text-align:center;就可以实现行内元素的水平居中,但是记得要在父元素中设 ...
- 主流 CSS 布局(水平居中、垂直居中、居中 )
什么是布局 html 页面的整体结构或骨架 布局不是某个技术内容 而是一种设计思想 [ 布局方式 ] 水平居中布局 垂直居中布局 居中布局( 水平 + 垂直 ) 什么是水平居中布局 水平居中布局 元素 ...
- 界面设计技法之css布局
css布局之于页面就如同ECMAScript之于JS一般,细想一番,html就如同语文,css就如同数学,js呢,就是物理,有些扯远,这里就先不展开了. 回到主题,从最开始的css到如今的sass(l ...
- CSS 布局
近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...
- CSS布局（上）
CSS布局(上) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !import ...
随机推荐
- maven eclipse jetty debug
可以通过查看最近版本: http://mvnrepository.com/artifact/org.eclipse.jetty/jetty-server http://search.maven.org ...
- Android Studio NDK 学习之接受Java传入的字符串
本博客是基于Android Studio 1.3 preview版本,且默认你已经安装了Android SDK, Android NDK. 用Android Studio新建一个工程叫Prompt,其 ...
- unity4.6 failed to update unity web player
unity4.6 failed to update unity web player 新升级的 4.6.2P2 版本修复了IOS很多的bug. 但突然发现导出的Web版本反而不能工作了. “faile ...
- [转载]SharePoint 2013搜索学习笔记之搜索构架简单概述
Sharepoint搜索引擎主要由6种组件构成,他们分别是爬网组件,内容处理组件,分析处理组件,索引组件,查询处理组件,搜索管理组件.可以将这6种组件分别部署到Sharepoint场内的多个服务器上, ...
- HTML5 新特性总结
1.使用autocomplete 自动完成必须给input 加上name. 2.SVG图形代码 复制https://developer.mozilla.org/zh-CN/docs/Web/SVG/E ...
- 《你不知道的javascript》一、函数作用域和块作用域
函数中的作用域 所谓函数作用域,就是属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b=a; function bar(c){ var c=b* ...
- 价值100W的经验分享: 基于JSPatch的iOS应用线上Bug的即时修复方案,附源码.
限于iOS AppStore的审核机制,一些新的功能的添加或者bug的修复,想做些节日专属的活动等,几乎都是不太可能的.从已有的经验来看,也是有了一些比较常用的解决方案.本文先是会简单说明对比大部分方 ...
- 华为手机Edittext光标（cursor）颜色修改
华为手机的emui系统经常让人发出“可以可以,这很华为”的感叹 这两天在edittext部分也发生了这样的事情 正常edittext光标的颜色和宽度都说可以修改的,只需要通过xml中的 textCur ...
- struts.custom.i18n.resources国际化
每种框价都会有国际化的支持,struts2的国际化大致上分为页面的国际化,Action的国际化以及xml的国际化 首先在struts.properties文件中加入以下内容:struts.custom ...
- {"集合已修改；可能无法执行枚举操作。"}
无论是向集合中添加元素还是从集合中删除元素,都会导致集合内部的变化,特别是集合遍历器的变化.例如 List<,,,,}; foreach(int x in list) { list.Remove ...