如何用css让一个容器水平垂直居中
方法一：
以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半}。
这样比较麻烦，还需要自己计算高度和宽度，后来发现可以使用transform:translate(-50%,-50%);来代替margin，就能很好的解决了。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width:400px;
height:400px;
margin: auto;
position:relative;
border:1px solid black;
}
.content{
width:200px;
height:200px;
background:green;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
</html>
方法二：
<div class="box4">
<div class="child4"></div>
</div>
.box4{
width:100px;
height:100px;
background:gray;
position:relative;
}
.child4{
background:red;
width:50px;
height:50px;
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
方法三：
<div class="box1">
<div class="child1"></div>
</div>
.box1{
width:100px;
height:100px;
background:gray;
text-align:center;/*居中效果只对文本内容和行内元素有效*/
display:table-cell;
vertical-align:middle;
}
.child1{
display:inline-block;
background:red;
width:50px;
height:50px;
}
方法四：
<div class="box2">
<div class="child2"></div>
</div>
.box2{
width:100px;
height:100px;
background:gray;
display:table-cell;
vertical-align:middle;
}
.child2{
margin:0 auto;/*在元素本身上设置，可以实现块级元素水平居中*/
background:red;
width:50px;
height:50px;
}
方法五：
display:flex + margin:auto
<div class="box2">
<div class="child2"></div>
</div>
.box2{
width:100px;
height:100px;
background:gray;
display:flex;
}
.child2{
margin:auto;
background:red;
width:50px;
height:50px;
}
如何用css让一个容器水平垂直居中的更多相关文章
- 公司的一个面试题：如何用css让一个容器水平垂直居中？
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 用css让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 七种css方式让一个容器水平垂直居中
阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...
- 【原】用css让一个容器水平垂直
这种css布局平时用的比较多,也是面试题常出的一个题,网上一搜一大丢,不过还是想自己总结一下. 这种方法比较多,本文只总结其中的几种,以便加深印象. 效果图都为这个: 方法一:position加mar ...
- css进阶 04-如何让一个元素水平垂直居中？
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- CSS布局：元素水平垂直居中
CSS布局:元素水平垂直居中 本文将依次介绍在不同条件下实现水平垂直居中的多种方法 水平垂直居中是在写网页时经常会用到的需求,在上两篇博客中,分别介绍了水平居中和垂直居中的方法.本文的水平垂直居中就是 ...
- css知识笔记：水平垂直居中（别只看，请实操！！！）
css实现元素的水平垂直居中. (尝试采用5W2H方法说明): 别只看,请实操!!! What: 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式,并说明优缺点. 2.写这篇文章的目 ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
随机推荐
- ActionBarActivity的使用注意事项
1.调用getActionbar()方法返回为空的解决方法 此activity是设计来支持低版本系统用actionbar的,低版本没有getActionbar() 需要使用 getSupportAct ...
- lucene、solr中的日期衰减方法-------function query --尚未测试在solr4.8
经常有一种情景是这样的:我们索引了N年的文章,而查询时候无论直接用相关度.或者用时间排序,都是比较鲁莽的:我们想要一种既要相关度比较高,又要时间上比较新的文章. 这时候的解决办法就是,自定义日期衰减的 ...
- day70 12-存储过程和存储函数
什么是相关子查询? 这是一个子查询,子查询本身又是一个多表查询.where不能用组函数,但是可以用字符函数instr().除了order by排序没有考,查询语句的所有内容都考了.这个题有点难度. 今 ...
- 解决iText+freemark导出pdf不支持base64的解决办法
工具类: package test; import java.io.IOException ; import org.w3c.dom.Element ; import org.xhtmlrendere ...
- Codeforces 1142D（dp）
题目传送 先给出设计dp的结论: dp[i][j]:以第i个位置.以rankj的数拓展出去的方案数.意会一下,我实在想不好语言-- 其中所谓rankj=真·rank%11 找到拓展的规律,转移也就顺理 ...
- IPv6地址在URL上的格式
转自:http://www.cnpaf.net/Class/RFC/200408/983.html 摘要 本文档定义了在WWW浏览器的URL中执行的文本IPv6地址的格式.在包括Microsoft的I ...
- resize和reserve的区别
转自http://blog.csdn.net/jackywgw/article/details/6248342 首先必须弄清楚两个概念: 1.capacity 指容器在分配新的存储空间之前能存储的元素 ...
- Python 网络爬虫 007 (编程) 通过网站地图爬取目标站点的所有网页
通过网站地图爬取目标站点的所有网页 使用的系统:Windows 10 64位 Python 语言版本:Python 2.7.10 V 使用的编程 Python 的集成开发环境:PyCharm 2016 ...
- PCL—点云滤波（基于点云频率） 低层次点云处理
博客转载自:http://www.cnblogs.com/ironstark/p/5010771.html 1.点云的频率 今天在阅读分割有关的文献时,惊喜的发现,点云和图像一样,有可能也存在频率的概 ...
- Luogu 4310 绝世好题
BZOJ 4300 先把这堆东西丢到博客里,以后再复习. 首先考虑暴力的$dp$,设$f_i$表示以$i$结尾的满足条件的序列的最长长度,有: $f_i = max(f_j) + 1$ $j & ...