css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充:
水平居中
水平居中有两种情况:
子元素是内联元素
这种那个情况下只需要在父元素定义: text-align:center;
例子:
html://省略了body,html
<div class="out-div">
hello world
</div>
<div class="out-div">
<span>
same for a inline tag
</span>
</div>
css:
.out-div{
height: 100px;
background: blueviolet;
text-align: center;
border:1px solid black;
}
这里注意到out-div 并没有是设置水平宽度,然而其width依然占满了屏幕,这点在定宽块状元素的水平居中会谈。
子元素是块状元素
子素的width确定,也就是定宽情况,只需要设置margin: auto;即可
例子:
html:<div class="block-out-div">
<div class="block-div"> </div>
</div>
css:
.block-out-div
{
height: 100px;
background: gold;
margin:auto; //重点
}
.block-div{
width: 50px;
height: 50px;
background: #cccccc;
}
原理: “正常流中的块级元素框的水平总和就等于父元素的width”(from css权威指南),这就是所谓块状元素正常情况下独占一行,一就是上面的div没设置width默认占满父元素的宽度。”在水平格式化的“7大属性”中,只有3个可以设置为auto: width, margin-left, margin-right”(from css权威指南),这七个值分别是 margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right
.默认情况下这七个值应该等于父元素宽度.子元素宽度不确定
这种情况下比较麻烦,但是解决方案有几种:
1.利用table-cell原理,什么意思呢,table标签是特殊的标签,他会根据内容来确定自己宽度,所以在需要居中的内容里面套上一套table即可,相当套了一个定宽的块状元素,然后给这个table设置margin:auto即可
具体示例如下:<div class="block-out-div">
<table class="table-wrap">
<tr>
<td>
<div class="no-width-box">
宽度不确定
</div>
</td>
</tr>
</table>
</div>
只需设置table,css:
.table-wrap{
margin: auto;
}
这种做法缺点是增加了标签,破坏了语义化
2.第二种简单的方式是直接给需要设置居中子元素设置:display:inline-block;使得子元素拥有内联元素的特性,这时候为父元素设置:text-align:center;就可以居中了.
例子:
html:<div class="block-out-div">
<div class="no-width-box">
宽度不确定
</div>
</div>
css:
.block-out-div
{
height: 100px;
background: gold;
border: 1px solid black;
text-align: center;
}
.no-width-box{
display: inline-block;
}
3.运用脱离文档流的方式,先给父元素设置position:relative;和left:50%;相当于把父元素整个移动百分五十%,但是对于子元素而已,他的整个应该是在父元素的中分线右边,这个时候对子元素设置rposition:relative;和left:-50%;就可以居中了。这里需要注意一点是relative 设置定位是不会脱离文档流的,他本身位置并没有变,可以理解视觉上的变化,这种情况下很可能会影响到别的元素,通过设置父元素float:left;来解决.
例子:
html,我一样用上面的html代码,改下css:<div class="block-out-div">
<div class="no-width-box">
宽度不确定
</div>
</div>
css:
.block-out-div
{
height: 100px;
background: gold;
border: 1px solid black;
float: left;
position: relative;
left: 50%;
}
.no-width-box{
position: relative;
left: -50%;
} display: inline-block;
这种方式需要注意的是父元素已经脱离了文档流,已经脱离了文档流。
垂直居中
单行文本
这种情况不管子元素是内联还是块状,只要父元素高度确定,设置height的值和line-height值相同就可以垂直居中.
例子:
html:<div class="out-div">
hello world
</div>
css:
.out-div{
height: 100px;
background: blueviolet;
border:1px solid black;
line-height: 100px;
}
多行文本
对于有多个元素需要居中的情况,有几种解决方案:
1.table-cell,套上table标签,包括tr,td,设置table高度和父元素高度一样即可
html:<div class="block-out-div">
<table>
<tr>
<td>
<div>
宽度不确定
</div>
<div>
宽度不确定
</div>
</td>
</tr>
</table>
</div>
css:
table{
height: 100px;
}
.block-out-div
{
height: 100px;
border: 1px solid black;
}
这种方式原理是利用vertical-align:middle;这个属性设置对table类的标签的子元素居中,也就是display:table-cell的元素有效;当然也可以显示设置别的元素为table-cell,而且默认的table-cell元素,vertical-align为middle,所以,只要设置了display就行了。
还有别的方式:比如可以通过设置position属性等.
h5 弹性盒子布局中
这个时候用flex,实现水平垂直居中变得很容易.
例子:
<div class="contianer">
<div class="child">
flex
</div>
</div>
css:
.contianer{
height: 100px;
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}
css 水平垂直居中总结的更多相关文章
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- CSS水平垂直居中的几种方法
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- 介绍一种css水平垂直居中的方法(非常好用!)
这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...
- css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
随机推荐
- C#类继承和接口继承时一些模棱两可的问题[转]
原文地址:http://www.cnblogs.com/harleyhu/archive/2012/11/29/2794809.html 1.在father定义的方法若含有virtual关键字,chi ...
- ASP.Net中的Web Resource
http://support.microsoft.com/kb/910442,这是中文的,机器翻译的,不太容易看懂,英文的是:http://support.microsoft.com/kb/91044 ...
- ubuntu安装使用GitHub--PC端
按照这个步骤安装并且初步使用 按照这个程序配置git的ssh,在git push时不用输入密码
- 限制action所接受的请求方式或请求参数
原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...
- hashmap的底层实现
HashMap的底层实现都是数组+链表结构实现的,添加.删除.获取元素都是先计算hash值,根据hash值和table.length计算出index也就是table的数组的下标,然后进行相应的操作. ...
- LinuxStudyNote
LinuxStudyNoteBy_Silvers:(E:\Video_Tutorials\Linux自学视频\linux视频教程-后盾网视频教程)22:25 2016/1/28============ ...
- NDK开发历程(一):android native code的调试方法
引用:http://www.cnblogs.com/ychellboy/archive/2013/02/22/2922683.html 使用NDK在android上做开发是一件“痛并快乐着”的差事,之 ...
- 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数015,vector矢量
<zw版·Halcon-delphi系列原创教程> Halcon分类函数015,vector矢量 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...
- nis,nfs,pam小结
最近一周总算把nis/nfs配置起来,中间各种被坑,这里简单记录一下: 主要参考两个大牛的文章,柏青哥,鸟哥 配置完之后的功能是可以连接任意一台主机,所有主机之间共享HOME目录,而且每人都有一定的限 ...
- PMP考试
今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...