css盒子垂直居中
首先父盒子包住子盒子
<body>
<div class="outbox">
<div class="box"></div>
</div>
</body>
方法一：设置距父盒子的margin-top/margin-left为父盒子宽度或长度-子盒子宽度或长度一半
<style>
*{
padding: 0;
margin: 0;
}
.outbox{
width:100px;
height: 100px;
background: chartreuse;
border: 1px solid black;
margin: auto;
}
.box{
width: 50px;
height: 50px;
background: red;
margin-top: 25px;
margin-left: 25px;
}
</style>
方法二：绝对定位距左距上50% margin-top和margin-left 各为负的宽高一半拉回来
<style>
*{
padding: 0;
margin: 0;
}
.outbox{
width:100px;
height: 100px;
background: chartreuse;
border: 1px solid black;
margin: auto;
position: relative;
}
.box{
width: 50px;
height: 50px;
background: red;
position: absolute;
left:50%;
top:50%;
margin-left: -25px;
margin-top: -25px;
}
</style>
方法三：magin:auto absolute然后距离左右上下都为0
<style>
*{
padding: 0;
margin: 0;
}
.outbox{
width:100px;
height: 100px;
background: chartreuse;
border: 1px solid black;
margin: auto;
position: relative;
}
.box{
width: 50px;
height: 50px;
background: red;
position: absolute;
margin: auto;
top:0;
left:0;
bottom:0;
right:0
}
</style>
方法四：利用table-cell（注意：只能用于ie8及其以上）属性 将父元素表格形式呈现 vertical-align显示为上下居中middle
<style>
*{
padding: 0;
margin: 0;
}
.outbox{
width:100px;
height: 100px;
background: chartreuse;
border: 1px solid black;
margin: auto;
display: table-cell;
vertical-align: middle;
}
.box{
width: 50px;
height: 50px;
background: red;
margin: auto;
}
</style>
方法五：弹性布局居中 align-item:center垂直居中 justify-content:水平居中
<style>
*{
padding: 0;
margin: 0;
}
.outbox{
width:100px;
height: 100px;
background: chartreuse;
border: 1px solid black;
margin: auto;
display:flex;
align-items: center;
justify-content: center;
}
.box{
width: 50px;
height: 50px;
background: red;
}
</style>
绝对定位的方式fixed可以如法炮制；当然我认为也可以用display:inline-block
css盒子垂直居中的更多相关文章
- css 盒子垂直居中
面试的时候经常会被问到这样一个题目:让一个元素中内容垂直居中怎么做.其实之前,我就会两种,line-height和table-cell,今天做项目,遇到了这个问题,就系统的查了一下,总结一下方法: 1 ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 让div盒子相对父盒子垂直居中的几种方法
div相对于父盒子垂直居中的几种方法,之前在网上看到很多种方法,确实说的很对,也很具体,但是我感觉对于初学者来说,一目了然是最重要的,所以,我把很高深的技巧,和很复杂的css样式都剔除掉,旨在让更多人 ...
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- html中元素盒子垂直居中的实现方法
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- css盒子模型基础，margin-top塌陷，元素溢出
现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接 一. 初识盒子模型 例子1,测试盒子各属性设置 <head> <s ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- 五种方法让CSS实现垂直居中
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
- CSS实现垂直居中的5种方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 使用 CSS 实现垂直居中并不容易.有些方法在一些浏览器 ...
随机推荐
- jsp中jsp:forward 与 redirect区别
部分转载:http://hi.baidu.com/168zlf/item/2f4b2ad4351b881c20e2500c 在网上看到一些帖子,总结了一些区别,可以从以下几个方面来看: 1.从地址栏显 ...
- Linux入门，这七大习惯得有！
对于很多Linux初学者来说,在刚开始使用Linux系统时会感到很多不适.这里为大家整理了自己以前Linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安全 ...
- 手把手教你使用koa2
简介 koa是由express的原班人马打造的web框架.但是相对于express,koa的性能要更高,因为koa通过使用aysnc函数,帮你丢弃回调函数,并有力的增强了错误处理.而且koa没有绑定任 ...
- 51nod 1181 质数中的质数
1181 质数中的质数(质数筛法) 题目来源: Sgu 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 如果一个质数,在质数列表中的编号也是质数,那么就称 ...
- seaborn基础整理
seaborn是基于matplotlib的更高级的做图工具,下面主要针对以下几个部分进行整理: 第一部分:https://douzujun.github.io/page/%E6%95%B0%E6%8D ...
- Git之代码合并及分支管理
环境说明: 对于一个git项目而言,公司在gitlab上有对应的三个分支,以kazihuo项目为例说明,分别是development.master.testing,运维首先在gitlab上创建一个gr ...
- Django中url()
使用django的时候,如果我们希望我们编写的view可以被正常访问,就需要配置url. 在django的官方文档中,url()的例子如下: polls/urls.py from django.con ...
- Redis学习九：Redis的发布订阅
发布订阅功能,redis也具备,但是要知道的是redis主要功能还是分布式的缓存功能,因此这种订阅发布功能很少用,有专门的kafka activemq 等消息中间件来完成,因此本文只是简单介绍,了解 ...
- 回溯算法——解决n皇后问题
所谓回溯(backtracking)是通过系统地搜索求解问题的方法.这种方法适用于类似于八皇后这样的问题:求得问题的一个解比较困难,但是检查一个棋局是否构成解很容易. 不多说,放上n皇后的回溯问题代码 ...
- 悲催的IE6 七宗罪大吐槽（带解决方法）第一部分
一.奇数宽高 悲剧的IE6啊,为何有如此多bug,但用户市场又那么大,真让我们搞网站的纠结.今天就遇到了一个非常奇怪但又很细节的一个bug,一个外部的相对定位div,内部一个绝对定位的div(righ ...