CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题
元素的居中问题是每个初学者碰到的第一个大问题，在此我总结了下各种块级 行级 水平 垂直 的居中方法，并尽量给出代码实例。
首先请先明白块级元素和行级元素的区别
块级元素
块级元素水平居中
1：margin: 0 auto
element {
margin: 0 auto;
}
2：负边距+绝对定位
.outside {
width:500px;
height:200px;
background-color: red;
margin:100px auto;
position: relative;
}
.inner {
width: 100px;
height:50px;
background-color: yellow;
position: absolute; // 绝对定位
left:50%; // +
margin-left: -50px; // 负边距
}
3： 弹性盒子flexbox：
.outside {
width:500px;
height:200px;
background-color: red;
margin:100px auto;
position: relative;
display: flex; // 父元素display:flex;
justify-content: center; // 主轴上居中对齐
}
.inner {
background-color: yellow;
height:100px;
width: 50px;
}
块级元素垂直居中（元素高度已知）：
1： 利用负边距+绝对定位
.outside {
width:720px;
height: 720px;
margin: 0 auto ;
position: relative; /*祖先元素的非static定位*/
}
.inner {
width: 350px;
height: 350px;
position: absolute;
top: 50%; /*元素相对其最近的position属性不为static的元素(祖先元素)移动50%，top、right、bottom 和 left 属性指定定位元素的位置。*/
margin-top: -175px; /*元素向上移动自身的50%，此时，正好垂直居中*/
}
2. 弹性盒子flexbox：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.outside {
width:300px;
height: 200px;
margin:100px auto;
background-color: red;
display: flex; // 弹性盒子
align-items: center; // 弹性盒子
}
.inner {
width:50px;
height: 30px;
background-color: yellow;
}
</style>
</head>
<body >
<div class="outside">
<div class="inner">
inner
</div>
</div>
</body>
</html>
3. 绝对定位+父元素position非static+子元素transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
.outside {
width:300px;
height: 200px;
margin:100px auto;
background-color: red;
position: relative; // 父元素非static
}
.inner {
width:50px;
height: 30px;
background-color: yellow;
position: absolute;
top:50%;
transform: translateY(-50%); // 相对于自身高度，向上移动50%
}
</style>
</head>
<body >
<div class="outside">
<div class="inner">
inner
</div>
</div>
</body>
</html>
块级元素垂直居中（元素高度未知）：
1. position:absolute + transform属性
利用transform的translate()或translateY()方法
<!--Html 代码-->
<div class="outside">
<div class="inner">
</div>
</div>
/*Css 代码*/
.outside {
background-color: #5555ee;
width:720px;
height: 720px;
margin: 0 auto ;
position:relative; }
.inner {
width: 350px;
height: 350px;
background-color: #ee5555;
position: absolute;
top:50%;/*相对祖先元素向下移动50%*/
transform: translateY(-50%);/*元素y轴移动自身的一半*/
transform: translate(,-50%);/*元素y轴移动自身的一半,与上一行效果相同*/
}
2 position:absolute + margin-top:auto + margin-bottom:auto
利用上边距，下边距在垂直方向的auto
<head>
<style type="text/css">
.outside {
width: 300px;
height: 300px;
background-color: red;
margin: 60px auto;
position: relative;
}
.inside {
width: 150px;
height: 150px;
background-color: black;
position: absolute; 首先是父元素与子元素的position属性值要“配套”好，这样子元素的top,bottom才可以发挥应有的作用
top:30px;
bottom:30px; 当垂直方向上的margin为auto时，不论是margin-left，margin-right,还是margin:auto, auto总是会试图充满整个父元素，
margin: auto 4px; 30px,30px,auto的“配合”是此方法有效果的关键所在。子元素被要求拉伸到top:30px;bottom:30px;(两个值必须一样，这样才居中)，但因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。
}
</style>
</head>
<body>
<div class="outside">
<div class="inside"></div>
</div>
</body>
3 flexbox弹性盒子
<!--Html 代码-->
<div class="outside">
<div class="inner">
</div>
</div>
3.1 设置direction:row或是direction:columns
.outside {
display: flex;
flex-direction: column;
/*主轴方向设为垂直方向*/
justify-content: center;
/*主轴方向上的元素的对齐方式*/
}
.outside {
display: flex;
flex-direction: row;
/*默认主轴方向就是row*/
align-items: center;
/*交叉轴上的元素的对齐方式*/
}
3.2 目前来说最简单的方法：
.outside {
display: flex;
}
.inner {
margin: auto;
}
二 行级元素
水平居中：
{
text-align:
}
垂直居中：
CSS居中问题：块级元素和行级元素在水平方向以及垂直方向的居中问题的更多相关文章
- CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
- 前端css之文本操作及块级元素和行内元素
1.文本操作 1.1文本颜色(color) 颜色指定方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 - 如: red 1.2水平对齐方式 ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS中的块级元素与行级元素
最近初学CSS时对块级元素与行级元素有时会产生混淆,写篇博客记录一下自己对其的理解. 先从概念上来看: 块级元素 特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行 ...
- CSS块级元素与行级元素（转载）
块元素一般都从新行开始,它可以容纳内联元素和其他块元素,常见块元素是段落标签'P".“form"这个块元素比较特殊,它只能用来容纳其他块元素. 如果没有css的作用,块元素会顺序以 ...
- CSS学习笔记——盒模型，块级元素和行内元素的区别和特性
今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面 ...
- css块级元素和行内元素详细解析
块级元素和行内元素是布局中常见的两种基本元素,但是未必有很多人深入的研究它们的细微差别. 常见块级元素:div p form ul ol li 等: 常见的行内元素:span stronh em; ...
- 【CSS系列】块级元素和行内元素
块级元素: 块级元素生成一个元素框,默认会填充其父元素的内容区,旁边不能有其他元素,换句话说,它在元素框之前和之后生成了“分隔符”. 列表项是块级额元素的一个特例,除了表现方式与其他块元素一致,列表项 ...
- CSS标准文档流 块级元素和行内元素
标准文档流 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- 小蒟蒻的垃圾emacs配置
(global-set-key [f9] 'compile-file) (global-set-key [f10] 'gud-gdb) (global-set-key (kbd "C-s&q ...
- cookie session token详解
cookie session token详解 转自:http://www.cnblogs.com/moyand/ 发展史 1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, ...
- CDH集群安装配置（四）- mysql 的安装
安装mysql,并且创建相关的表(只需要在chd1上面安装而且需要root权限)1.1 查看Centos自带mysql是否已经安装 yum list installed | grep mysql 卸载 ...
- APP高级抓包
1.fiddler的证书安装问题时密码问题 问题:我手机下载了fiddler证书 从设置里面安装证书 可是需要输入密码 我没有设置过密码 不知道密码是什么 请问有人遇到过这样的问题的?求解决方法 因为 ...
- egg
简介 阿里的 红色的是项目名字 egg-init --type simple First && cd First egg-init --type simple Second &a ...
- oracle10g获取Date类型字段无时分秒解决办法！
一般的数据库中,DATE字段仅仅表示日期,不包括日期信息,而Oracle数据库中的DATE数据类型是包括日期.时间的,对于不同的Oracle jdbc驱动版本,对于该问题的处理都有些区别. 最近使用 ...
- render函数的使用
render函数的几种使用方法最近使用element-ui的tree组件时,需要在组件树的右边自定义一些图标,就想到了用render函数去渲染. <el-tree class="p-t ...
- ElasticSearch基础入门
1.query查询表达式 Elasticsearch 提供一个丰富灵活的查询语言叫做 查询表达式 , 查询表达式(Query DSL)是一种非常灵活又富有表现力的 查询语言,它支持构建更加复杂和健壮的 ...
- JS将文件像form表单一样提交到后台
这是很简单.. HTML <div> <input type="file" id="myfile"> <input type=&q ...
- 跨平台 GUI可视化 网络调试工具
mNetAssisthttp://blog.chinaunix.net/uid-21977056-id-4310527.htmlhttps://github.com/busyluo/mNetAssis ...