css 元素居中各种办法
一：通过弹性布局
<style>
#container .box{
width: 80px;
height: 80px;
position: absolute;
background:red;
}
#container{
background:green;width: 250px;height: 250px;border: 1px solid khaki; //下面三行是核心代码
display: flex;
justify-content: center;
align-items: center; }
</style>
</head>
<body>
<div id="container"> <div class="box">
</div></div>
效果如下：
二、通过绝对定位来水平居中一个块级元素，（知道元素宽度，高度）。 <style>
#container .box{
width: 80px;
height: 120px;
background:red;
position: absolute;
top: 50%;
left: 50%;
background:red;
margin-top: -60px; // 这二行可以用 transform: translate(-50%,-50%);代替分别对应x,y即宽高的一半
margin-left: -40px;
}
#container{
position:relative;background:green;width: 250px;height: 250px;border: 1px solid khaki; </style>
</head>
<body>
<div id="container"> <div class="box"> </div></div>
效果图如下：
垂直居中单行文字
<div>
<span>这是居中的单行文字<span>
</div> <style>
div{width:300px;height:200px;background:#66f;color:white;}
span {line-height:200px}
</style>
//这里通过父元素高度(height)与文字行高（line-height）相等做到的
效果图：
多行文字的居中
<div>
<p>这是居中的多行文字
这是居中的多行文字
这是居中的多行文字
这是居中的多行文字<p> </div>
<style>
div{width:300px;height:200px;background:#66f;color:white;
display:table
}
p{vertical-align:middle;display:table-cell}
</style>
//这里通过为父元素设置display:table，把多行文字用p元素包裹然后运用只对表格单元格有效的vertical-align:middle的css规则，就能完美居中
//此效果还可以用它来居中图片。
效果图：
css 元素居中各种办法的更多相关文章
- css 元素居中
css 4种常见实现元素居中的办法: 1.通过 margin 属性调整 : { position: absolute; top: 50%; left: 50%; margin-left: 盒子的一半: ...
- Css元素居中设置
你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...
- CSS元素居中汇总
总结实现不同类型元素居中的几种方法: 一.把margin值设置为auto(实现水平居中) 可以实现元素水平居中对齐 原理:使 margin-left=margin-right 如果设置 marg ...
- CSS元素居中的常用方法
只有普通流和绝对定位的元素可以设置居中,浮动元素是不存在居中的. 1.块级元素居中 1) 普通流元素(position : static 或 position : relative) 水平居中:{ m ...
- css元素居中
水平居中 若为行内元素,对其父元素用text-align:center即可: 若为块元素(无浮动),则一般有两种方法可实现对其的水平居中,一为margin:0 auto;二为通过css计算函数calc ...
- css 元素居中方法
目前知道有两种方法 方法一:主要适用于元素未设定高度的情况下. 直接上代码 html: <div class="nav-content"> <ul ng-clic ...
- css元素居中方法
几种居中方式,分情况使用: 1.已知父盒子宽度,子盒子宽度: div{ transform: translate(-50%,-50%); //margin-left: - 自身宽度一半: positi ...
- （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- css元素居中的几种方式
1.水平居中 <div style="width:200px;margin:0 auto;background-color: yellow;">水平居中</div ...
随机推荐
- andorid avd 下 使用 fiddler 抓包
Fiddler 设置:
- MySQL8，登陆root后修改root密码的正确方式
如题,·MySQL8以上的修改密码方式和5不一样 网上搜到的无用答案很多,这里记一下版本8的正确修改方式,也方便自己和他人 USE mysql; ALTER user 'root'@'%' IDENT ...
- python高级（三）—— 字典和集合（泛映射类型）
本文主要内容 可散列类型 泛映射类型 字典 (1)字典推导式 (2)处理不存在的键 (3)字典的变种 集合 映射的再讨论 python高级——目录 文中代码均放在github上:https://git ...
- linux 系统管理(2) 文件或目录数量统计
统计某文件夹下文件的个数 ls -l |grep "^-"|wc -l 统计某文件夹下目录的个数 ls -l |grep "^d"|wc -l 统计文件夹下文件 ...
- axios简单介绍
axios的配置,get,post,axiso的同步问题解决 一.缘由 vue-resoure不更新维护,vue团队建议使用axios. 二.axios安装 1.利用npm安装npm install ...
- idea validation code
K71U8DBPNE-eyJsaWNlbnNlSWQiOiJLNzFVOERCUE5FIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- JAVA学习1：Maven3环境搭建
好长时间不用Java,今天看了下,Maven集成成主流了,在技术水平与日俱进的同时,感叹下IT行业必须有活到老学到老的精神. 先说下环境: Maven:Maven 3.0.5 解压后路径:F:\Mav ...
- Docker安装及常用操作
Docker简介: Docker是一个轻量级容器技术,类似于虚拟机技术,但性能远远高于虚拟机,Docker支持将软件编译成一个镜像(image),在这个镜像中做好对软件的各种配置,然后可以运行这个镜像 ...
- Parsing Failure in config.xml: java.lang.IllegalArgumentException: In production mode, it's not allowed to set a clear text value to the property
Step1). in your "setDomainEnv.sh" script set the "PRODUCTION_MODE=false" or use ...
- html控件
checkbox val = "<li class='layer'><label><input type='checkbox' checked name='la ...