如何用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做一个爱心. 前期预备知识: ...
随机推荐
- hibernate学习笔记（2）持久化类测试
持久化类的创建: 创建一个共有的不带参数的构造方法: public void Students(){ } 创建一个带参数的构造方法: (快捷键创建) 生成get,set方法: *可以不用此方法创建持久 ...
- adb device offline 解决办法
当电脑中的豌豆荚之类的应用打开的状态下 adb devices 显示连接状态 关闭手机助手之后,adb devices总显示 device offline 后来发现sdk platform-tool ...
- CDN原理解析
首先,让我们来看一下传统的Internet网络的基本结构和数据传输情况,如下图所示 根据传统的网络结构,用户的访问流程基本如下: 用户在自己的浏览器中输入要访问的网站的域名 浏览器向本地DNS请求 ...
- 请用fontAwesome代替网页icon小图标（转）
1. 引言 网页小图标到处可见,如果一个网页都是干巴巴的文字和图片,而没有小图标,会显得非常简陋.下面的小图标,你是不是会经常用到? 你可能说——“我们用的都是彩色的,不是黑白的”——别着急,下面会讲 ...
- sequelize 用于PostgreSQL，MySQL，SQLite和MSSQL的Node.js / io.js ORM
安装 Sequelize可通过NPM获得. $ npm install --save sequelize # And one of the following: $ npm install --sav ...
- IOS UITableView分组与索引分区实例
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- 杭电acm 1108题
这是一道求两个整数最大公倍数的问题,题目比较简单.... 直接使用穷举法计算,数据不是很大.... #include "iostream" using namespace std; ...
- Linux uname命令
一.简介 uname 命令将正在使用的操作系统名写到标准输出中. 二.语法 -a 显示 -m. -n. -r. -s 和 -v 标志指定的所有信息.不能与 -x 或 -SName 标志连用.如果 -x ...
- 如何使用EditPlus将json格式字符串默认为UTF-8格式
1.首先用EditPlus打开json格式的文件 2.选择Tools工具栏下的Configure User Tools 3.点击左侧File 4.在右侧Default encoding中选择UTF- ...
- scala的map的操作
1:map和模式匹配的结合 settings.foreach{case (k,v) => set(k,v)} 2:map转成array settings.entrySet().asScala.m ...