css高度居中
1.已知元素高度
// 子盒子
#div1{
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height,width
margin-left: -100px;
}
2.未知父元素高度
//子盒子
#div1{
width: 200px;
height: 200px;
margin:auto;
position: absolute; //父元素需要相对定位
left:;
top:;
right:;
bottom:;
background: red;
}
3.flex使盒子居中
// 父盒子
.da{
width: 500px;
height: 500px;
background: green;
display: flex; // 使用flex
align-items: center; // 上下居中
justify-content: center; // 左右居中
}
4.transform实现盒子居中
.da{
/*父盒子*/
width: 500px;
height: 500px;
background: green;
position: relative;
}
#er{
/*我是子盒子我要居中*/
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
5.
利用css3的新增属性table-cell, vertical-align:middle;
.da{
/*父盒子*/
width: 500px;
height: 500px;
background: green;
display: table-cell;
vertical-align: middle;
}
#er{
/*我是子盒子我要居中*/
width: 200px;
height: 200px;
background: red;
margin: auto;
}
css高度居中的更多相关文章
- CSS 高度居中方案
实现高度自适应并且上下居中 <div id="wrap"> <div class="box">DemoSeat</div> ...
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS中居中的完全指南(中英对照翻译)
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
- CSS 图像居中对齐
CSS 图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...
- CSS 高度(css height)
DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度.使用CSS属性单词height.单位可以使用PX,em等常用使用PX(像素)为ht ...
随机推荐
- 使用Jsp +Js + Jquery + EasyUI + Servlet + Lucene,完成分页
步一:创建ArticleDao.java类 public class ArticleDao { public Integer getAllObjectNum(String keywords) thro ...
- SHA加密
import java.security.MessageDigest; /** * 提供SHA加密 */ public class SHAUtil { // 进行SHA-1加密 public stat ...
- Jmeter使用实践- 基础介绍
Jmeter使用实践- 基础介绍 随着市场上推出越来越多的测试工具,大家使用起来也比较盲目,就我个人而言,使用过LoadRunner和Jmeter 很多人倾向于LoadRunner,因为LR的功能更强 ...
- Dubbo架构与底层实现
一.Dubbo的设计角色 (1)系统角色Provider: 暴露服务的服务提供方.Consumer: 调用远程服务的服务消费方.Registry: 服务注册与发现的注册中心.1Monitor: 统计服 ...
- Validform表单验证时的 【坑】
代码如下 <input style="width: 360px" name="ll_wb_job.qcwyJobUrl" value="&quo ...
- centos7.2 mysql tar.gz 搭建 (亲测成功)
1.安装依赖:yum -y install libaioyum search libaio 2.卸载系统自带的Mariadb数据库:rpm -qa | grep mariadbrpm -e --nod ...
- SpringBoot: 2.SpringBoot整合servlet(转)
整合方式1:通过注解扫描完成 Servlet 组件的注册 1.编写servlet package com.bjsxt.servlet; import javax.servlet.ServletExce ...
- NSubstitute.Analyzers检测NSubstitute用法冲突
NSubstitute是一个.Net环境使用的,简洁,语法友好的Mock库.语法简洁的缺点是有一些失败的用法很难察觉和检测.比如试图mock一个非虚拟成员-NSubstitute不能看到这些成员所以不 ...
- C# Redis 缓存应用 主要代码及版本选择
/// <summary> /// RedisManager类主要是创建链接池管理对象的 /// </summary> public class RedisManager { ...
- postman生成格式化时间
方法一: var moment = require('moment'); var data = moment().format(" YYYYMMDDHHmmss"); consol ...