如何用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做一个爱心. 前期预备知识: ...
随机推荐
- 提示crontab command not found的解决方法
操作步骤 1. 确认crontab是否安装: 执行 crontab 命令如果报 command not found,就表明没有安装 2. 安装 crontab 执行 yum insta ...
- Android按钮单击事件的四种常用写法
这篇文章主要介绍了Android按钮单击事件的四种常用写法总结,比较了常见的四种写法的优劣,有不错的参考借鉴价值,需要的朋友可以参考下 很多学习Android程序设计的人都会发现每个人对代码的写法都有 ...
- C++ 私有构造函数的作用
很多情况下要求当前的程序中只有一个object.例如一个程序只有一个和数据库的连接,只有一个鼠标的object.通常我们都将构造函数的声明置于public区段,假如我们将 其放入private区段中会 ...
- 在html中打开PDF
<object classid="clsid:CA8A9780-280D-11CF-A24D-444553540000" width="990" heig ...
- 71-n皇后
N皇后问题 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submi ...
- C语言-郝斌笔记-005菲波拉契序列
菲波拉契序列 /* 菲波拉契序列 1 2 3 5 8 13 21 34 */ # include <stdio.h> int main(void) { int n; int f1, f2, ...
- 两个进程之间的通讯——pipe 管道
在实际工作中,已经编辑好了NIPT_analysis的软件,该软件一般的输入文件是sam文件,但是为了集成进入测序仪器,需要直接从比对软件的标准输出中读取sam文件,省去了比对软件和NIPT_anal ...
- cf123E Maze
传送门 分析 见ptx大爷的博客 代码 #include<iostream> #include<cstdio> #include<cstring> #include ...
- PartyLocation的Post请求问题---debug
这里,遇到了一个debug: @Override public void setPrimaryPartyLocation(PartyLocation partyLocation) { if (!get ...
- LeetCode第110题：平衡二叉树
问题描述 给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3,9,20,nu ...