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 ...
随机推荐
- flask实战-个人博客-使用类组织配置
使用类组织配置 在实际需求中,我们往往需要不同的配置组合.例如,开发用的配置,测试用的配置,生产环境用的配置.为了能方便地在这些配置中切换,你可以把配置文件升级为包,然后为这些使用场景分别创建不同的配 ...
- Eclipse中的常见设置
本文将移到下面的博客维护: 新的博客网址 当新建一个workspace时,习惯做下面的设置: 1. 在eclipse中,默认的Text file encoding是GBK(操作系统是中文简体):如果操 ...
- React第一篇： 搭建React + nodejs + express框架
前提: 需要安装Node.js (>6)版本 1.cmd进到本地某个目录, 逐行输入以下指令(以下括号为注释) npm install -g create-react-app (全局安装cr ...
- Flutter Navigator 跳转
1,routes 静注册,使用 跳转 Navigator.pushNamed(context, "/main"); 2,静态跳转及销毁当前页面使用 Navigator.pushNa ...
- 第十一次 Scrum Meeting
第十一次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/4/18 21:00 20min 大运村1号楼6F 附Github仓库:WEDO 例会照片 工作情况总结 人员 ...
- vue学习（转载）
vue.js库的基本使用 第一步:下载 官网地址:https://cn.vuejs.org/v2/guide/installation.html 第二步:放到项目的文件目录下 一般新建一个js文件夹, ...
- JDK,JRE,JVM的基础理解
1.JVM -- java virtual machine JVM就是我们常说的java虚拟机,它是整个java实现跨平台的 最核心的部分,所有的java程序会首先被编译为.class的类文件,这种类 ...
- 查看SqlServer某张表的物理空间占用情况
以下语句可以查看表的物理空间使用情况 包括 [ROWS] 内容的行数.. [reserved] 保留的磁盘大小.. [data] 数据占用的磁盘大小.. [index_size] 索引占用的磁盘大小. ...
- Github提交PullRequest
Github提交PullRequest工作流程: 以Kubernetes为例 1. Fork Kubernetes到自己的Github目录 访问:https://github.com/kubern ...
- Kafka 0.9 新特性
Kafka发布0.9了,这一重磅消息,让小伙伴们激动不已,来看看这个版本有哪些值得关注的地方吧! 一.安全特性 在0.9之前,Kafka安全方面的考虑几乎为0,在进行外网传输时,只好通过Linux的防 ...