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.在结构使用上,块级元素可以包含行内元素和块级元素, ...
随机推荐
- HDU 1013 Digital Roots(字符串)
Digital Roots Problem Description The digital root of a positive integer is found by summing the dig ...
- Hadoop fs 命令详解
1. 环境:hadoop-2.6.0 2. 参数说明: hadoop fs [-appendToFile <localsrc> ... <dst>] [-cat [-ignor ...
- Eclipse主题设置
1. 内部编辑区域主题 Eclipse黑色主题包 下载主题包解压到Eclipse安装目录下的dropins目录,重启Eclipse,Windows—>Preferences—>Genera ...
- 我对Map端spill的理解
一.先看简单理解 对于hadoop的map端配置项"mapreduce.task.io.sort.mb"和"mapreduce.map.sort.spill.percen ...
- android源码查看所有分支切换分支
cd .repo/manifests git branch -a repo init -b android-4.1.2_r1 repo sync
- 关于C++中的重定位
"标准库定义了4个IO对象,处理输入时使用命名为cin的istream类型对象,这个对象也成为标准输入.处理输出时使用命名为cout的ostream类型对象,这个对象也称为标准输出.标准库还 ...
- jqgrid参数
jqGrid参数 名称 类型 描述 默认值 可修改 url string 获取数据的地址 datatype string 从服务器端返回的数据类型,默认xml.可选类型:xml,local,json, ...
- 微信小程序学习总结（1）
1.一个小程序文件最基本包含app.js.app.json.app.wxss和pages文件夹结构,pages中的页面必须要在app.json的pages项进行配置,app.json也提供窗口表现,t ...
- B-number
B-number 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3652 数位dp 这题是暑期集训的时候做的,昨天补了数位dp的记忆化搜索做法,把艾神的 ...
- 检索字符创 php
strstr()可以返回匹配的值 echo strstr("localhost", "os");返回ost echo substr_count("gg ...