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 ...
随机推荐
- 【关于selenium自动化中，Webdriver的原理以及工作流程】
原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...
- C#找出接口的所有实现类并遍历执行这些类的公共方法
//这里找出了实现IOutputArray接口的所有类 private void FindAllClass() { var types = AppDomain.CurrentDomain.GetAss ...
- 海思hi35xx 开发学习(1):海思媒体处理平台架构
处理平台架构图: 主要分为: 视频输入(VI):VI 模块捕获视频图像,可对其做剪切.去噪等处理,并输出多路不同分辨率的图像数据. 视频处理(VPSS):VPSS 模块接收 VI 和解码模块发送过来的 ...
- 20165224 陆艺杰 Exp6 信息搜集与漏洞扫描
Exp6 信息搜集与漏洞扫描 (1)哪些组织负责DNS,IP的管理. 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理. (2)什么是3R信息. 注册人 ...
- Boost内存池使用与测试
目录 Boost内存池使用与测试 什么是内存池 内存池的应用场景 安装 内存池的特征 无内存泄露 申请的内存数组没有被填充 任何数组内存块的位置都和使用operator new[]分配的内存块位置一致 ...
- DFS-20190206
找出所有方案 排列和组合问题 排列: https://www.lintcode.com/problem/combination-sum/description public class Solutio ...
- 使用chart.js時取消懸浮在圖表頂部的'undefined'標識
解決方法:在options中設置legend項中display屬性為false options: { scales: { yAxes: [{ ticks: { beginAtZero: true } ...
- python日志模块logging学习
介绍 Python本身带有logging模块,其默认支持直接输出到控制台(屏幕),或者通过配置输出到文件中.同时支持TCP.HTTP.GET/POST.SMTP.Socket等协议,将日志信息发送到网 ...
- 万物智联，腾讯云 IoT 边缘计算揭秘——云+未来峰会开发者专场回顾
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:现在是万物互联的时代,智能穿戴设备,智能家居,无人商业,改变了我们的生活方式.预计到2021年,全球物联网设数将达到150亿,超过手机 ...
- C# Unix时间戳转换[转载]
原文地址: C# Unix时间戳转换 遇到Unix时间戳转换的问题,遂记录下来. Unix时间戳转DateTime string UnixTime = "1474449764"; ...