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 实现垂直居中并不容易.有些方法在一些浏览器 ...
随机推荐
- 科学计算三维可视化---Mayavi入门(Mayavi管线)
一:Mayavi管线 mlab.show_pipeline() #显示管线层级,来打开管线对话框 (一)管线中的对象scene Mayavi Scene:处于树的最顶层的对象,他表示场景,配置界面中可 ...
- 5 Kafka 应用问题经验积累
16.Kafka 配置文件同步 为了给kafka的进程添加GC日志信息,方便在以后重启的时候,加入GC日志: 修改bin/kafka-server-start.sh: export KAFKA_OPT ...
- Nlog写日志到数据库
https://github.com/nlog/NLog/wiki/Database-Target
- 苏宁OLAP架构设计
一. 功能综述 OLAP引擎为存储和计算二合一的引擎,自身内部涵盖了对数据的管理以及提供查询能力.底层数据完全规划在引擎内部,外部系统不允许直接操作底层数据,而是需要通过暴露出来的接口来读写引擎内部数 ...
- Java并发编程原理与实战二十四:简易数据库连接池
public class MyDataSource { private static LinkedList<Connection> pool = new LinkedList<> ...
- Swift动态添加UIImageView并添加事件
Swift动态添加UIImageView并添加事件: 1. 创建UIImageView实例,并进行初始化 2. 设置UIImageView的用户交互属性userInteractionEnabled为T ...
- 20145226夏艺华 《Java程序设计》第5周学习总结
教材学习内容总结 第八章 异常处理 语法与继承架构 使用 try.catch Java中所有信息都会被打包为对象,如果愿意,可以尝试(try)捕捉(catch)代表错误的对象后做一些处理 try{ . ...
- python读写mysql
读取mysql数据 # -*- coding: utf-8 -*- # 导入必要模块 import pandas as pd from sqlalchemy import create_engine ...
- macOS 安装 pcl 1.8.0
Mac 上的 pcl 一直有问题. 找不到 pcl_viewer 查看 pcd 文件.写个程序用 pcl::visualization::CloudViewer 查看点云,遇到 Runtime Exc ...
- 【算法】Base64编码
1.说明 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法. 2.编码 ASCII码 -> 十六进制码 -> ...