如何用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做一个爱心. 前期预备知识: ...
随机推荐
- bzoj1951 组合数取模 中国剩余定理
#include<bits/stdc++.h> using namespace std; typedef long long ll; const int a[4]={2,3,4679,35 ...
- Python_pip_02_利用pip安装模块（以安装pyperclip为例）
>任务:利用pip安装pyperclip模块 >前提 你已经在你的电脑里面安装啦Python2.7的Windows版本,并且已经配置了环境变量 >实现步骤 >>打开你的P ...
- springJDBC01 利用springJDBC操作数据库
1 什么是springJDBC spring通过抽象JDBC访问并一致的API来简化JDBC编程的工作量.我们只需要声明SQL.调用合适的SpringJDBC框架API.处理结果集即可.事务由Spri ...
- Luogu 3205 [HNOI2010]合唱队
初赛滚粗的我含着眼泪写代码…… 设$f_{l, r, 0/1}$表示$[l, r]$的区间的队伍排列好,且最后一个插进去的在左边$(0)$/右边$(1)$的方案数,那么有初态$f_{i, i, 0} ...
- WOJ 41 约数统计
只会写60分算法QuQ 考虑到一个数$x$大于$\sqrt{x}$的质因数最多只有一个,我们可以筛出小于$\sqrt{r}$范围内的所有质因数然后直接用这些取分解质因数. 最后扫一遍发现还没有分解完的 ...
- scala中的表达式
scala中的表达式是有值的, 所以可以把表达式当做参数来传递, 那么接受表达式的形参定义一般是: block: =>Unit , 没有形参,返回类型Unit spark中的这个代码很经典, ...
- 《Effective Java》第8章 通用程序设计
第47条:了解和使用类库 Top 100 Java Libraries on Github 2016 Library Number of Projects Type % of projects jun ...
- 《Head First Servlets & JSP》-5-属性和监听
Servlet初始化参数 在DD文件(web.xml)中 Servlet参数在/参数下: 在Servlet代码中 在Servlet初始化之前不能使用Servlet初始化参数 一旦有了一个Servlet ...
- for循环 break
for (int i = 1; i <= 8;i++) {} for (int i=10; i>=1;i--) i的起始值是10 着次递减 for(){}嵌套放便控制行列的长短 break ...
- HTTP 协议 -- 报头信息
报头 每一个报头都是由 [名称 + ":" + 空格 + 值 + <CR><LF>] 组成.有四种不同类型的报头: 通用报头:可用于请求,也可以用于响应,它 ...