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(二)块级与行级元素特性、盒模型、层模型、BUG与BFC、浮动模型
一.元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性,常用的值有none.inline.block.inline-block,在CSS3中还有一些新的特性状态,在这里不做讨 ...
- HTML块级、行级元素，特殊字符，嵌套规则
如果介绍HTML网页基本标签的嵌套规则,首先要说的就是元素的分类.元素可以划分为块级元素和行级元素,块级元素是什么?它可以独占一行,可以设置宽高度,默认是100%:行级元素与之相反,它的内容决定它的宽 ...
- 元素显示模式：块元素 & 行内元素 & 行内块元素
元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...
- 【css对齐】块内或者行内图片与文字居中对齐最靠谱的方式！
块内或者行内图片与文字居中对齐最靠谱的方式! 做图片与文字在一行的按钮时候最常用到,总结了一个靠谱的方法,终于可以完美的对齐下面给个代码 首先是html: <p class="btnU ...
- css盒模型和块级、行内元素深入理解
盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...
- css总结17:HTML块级元素&行内元素之分: <div> 和<span>
1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素或内联元素. 1.1 块级元素实例: <div> <h1>, <p>, <ul>, &l ...
- css盒子模型的深入理解，在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- day001-html知识点总结（-）块级。行内元素区分
-.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...
随机推荐
- LeetCode 319. Bulb Switcher
There are n bulbs that are initially off. You first turn on all the bulbs. Then, you turn off every ...
- PowerCmd(命令行增强工具) 2.2 免费版
软件名称: PowerCmd(命令行增强工具) 2.2 免费版 软件语言: 英文 授权方式: 免费软件 运行环境: Win7 / Vista / Win2003 / WinXP 软件大小: 1.8MB ...
- String to Double出现误差
场景描述 做实际项目的时候,由于使用Double类的valueOf得到一个用String类型保存的金额参数(单位为元),当需要转换成以分为单位即整形表示(Integer类表示)时,需要用之前得到的do ...
- uiscrollview 事件冲突
self.scrollView.panGestureRecognizer.delaysTouchesBegan = YES;设置scrollView的延迟接收点击触摸事件,关闭触摸事件 self.sc ...
- c#中命令copy已退出,返回值为1
c#中命令copy已退出,返回值为1 本正经的道:董姐刚才你说的修心养性其中的'修心'我 有孕在身刚好由戴梦瑶顶替了她的位置按照的指示 ╋旆呆 湎术葶页 邾箕砜笳 烦璜卿廑 奶奶个腿儿的等下次非让你 ...
- @Autowired与 @Resource
@Autowired, @Resource 1.注解类型: Autowired可用于构造器.属性.方法.注解 @Target({ElementType.CONSTRUCTOR, ElementType ...
- 一.HttpClient、JsonPath、JsonObject运用
HttpClient详细应用请参考官方api文档:http://hc.apache.org/httpcomponents-client-4.5.x/httpclient/apidocs/index.h ...
- curl 命令使用总结
curl 查看网页源码 curl www.sina.com 保存页面 -o curl -o [文件名] www.sina.com 直接在curl命令后加上网址,就可以看到网页源码. 如果要把这个网页保 ...
- 更换jdk版本:jdk1.8更换为jdk1.7之后输入java -version还是出现1.8的版本号
安装了1.7之后修改了JAVA_HOME的环境变量 修改成功之后,在cmd输入java -verson还是出现1.8的版本号 解决办法:将环境变量Path中的%JAVA_HOME%/bin 移到最前面 ...
- java多线程并发编程
Executor框架 Executor框架是指java 5中引入的一系列并发库中与executor相关的一些功能类,其中包括线程池,Executor,Executors,ExecutorService ...