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 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画 空白折叠现象 ...
随机推荐
- nginx实现多语言跳转不同的url
nginx实现多语言跳转不同的url server { listen 80; server_name www.text.com; location / { if ($http_accept_langu ...
- Oracle Schema
1.这是Schema的definition: A schema is a collection of database objects (used by a user.) Schema objects ...
- ZOJ 2856 Happy Life
Problem Description Do you know Utopia? It's a perfect world in which everyone leads a happy life. A ...
- mongodb数据库还原
./mongorestore -h -u myhuiqu -p Huiqu.com@ --authenticationDatabase /
- 我该不该学习C语言
这几天把c语言过了一遍,基本上算是入门了,常用语法.函数的使用.c语言是比较古老的语言了,很多系统的底层.工业控制软件都是使用C语言编写,过一遍之后觉得c语言屹立不倒是有原因.c程序员有一句话:使用c ...
- 44个 Javascript 变态题解析
原题来自: http://javascript-puzzlers.herokuapp.com/ 读者可以先去做一下感受感受. 当初笔者的成绩是 21/44... 当初笔者做这套题的时候不仅怀疑智商, ...
- [转]象棋AI算法（一）
本文转自:http://blog.csdn.net/u012723995/article/details/47133693 参考文献:http://www.xqbase.com/computer/se ...
- [转]用Excel制作甘特图并管理项目
对于比较简单的项目管理,或绘制甘特图,选用电子表格工具——比如价格高也最强大的Excel.开源的OpenOffice.免费的WPS——可能比项目管理软件更方便. 1. XL-Easy Gantt 模板 ...
- 使用 Python 管理 Azure:基础配置
Azure 提供了丰富的 Python SDK 来对 Azure 进行开发管理,包括使用 Azure 的开源框架在 Azure 上创建 web 应用程序,对 Azure 的虚拟机,存储等进行管理,本系 ...
- 开源解决方案一：快速搭建单机版 LAMP 网站
LAMP 通常表示 Linux + Apache + MySQL/MariaDB + Perl/PHP/Python,LAMP 的各个组件不是一成不变的,并不局限于它最初的选择.作为一个解决方案套件, ...