CSS实现居中的方式
在介绍居中方式之前,简单介绍一下行内元素和块级元素。
行内元素
- 和其他元素都在同一行
- 高,行高及外边距和内边距部分可以改变
- 宽度只与内容有关
- 行内元素只能容纳文本或者其他行内元素
- 常用内联元素:
a
,img
,input
,lable
,select
,span
,textarea
,font
块级元素
- 总是在新行上开始,占据一整行
- 高度,行高以及外边距和内边距都可控制
- 宽度始终与浏览器的宽度一样,与内容无关
- 可以容纳行内元素和其他块级元素
- 常用的块级元素:
div
,p
,table
,form
,h1
,h2
,h3
,h4
,h5
,h6
,dl
,ol
,ul
,li
居中方式分为三种:水平居中,垂直居中,水平垂直居中。
1、水平居中
1.1、行内元素水平居中
利用text-align: center
可以实现在块级元素内部的行内元素水平居中。
此方法对行内元素(inline),行内块(inline-block),行内表(inline-table),inline-flex元素水平居中都有效。
<div class="center-text">
简单是稳定的前提。
</div>
div {
height:60px;
border: 2px dashed #f69c55;
}
.center-text {
text-align: center;
}
1.2、块级元素水平居中
通过把固定宽度的块级元素的margin-left
和margin-right
设成auto,就可以使块级元素水平居中。
<div>
<p class="center-block">
简单不先于复杂,而是在复杂之后。
</p>
</div>
div {
height:100px;
border: 2px dashed #f69c55;
}
.center-block {
margin: 0 auto;
width: 8rem;
padding:1rem;
color:#fff;
background:#000;
}
1.3、多块级元素水平居中
利用inline-block
如果一行中有两个或两个以上的块级元素,通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。
<div class="container">
<div class="inline-block">
简单不先于复杂
</div>
<div class="inline-block">
而是在复杂之后
</div>
<div class="inline-block">
简单不先于复杂,而是在复杂之后。
</div>
</div>
.container {
height:100px;
padding: 8px;
text-align: center;
border: 2px dashed #f69c55;
}
.inline-block {
padding: 8px;
width: 4rem;
margin: 0 8px;
color: #fff;
background: #000;
display: inline-block;
}
.container >div:first-child {
height: 45px;
}
.container >div:nth-of-type(2) {
height: 45px;
}
利用displa: flex
利用弹性布局(flex),实现水平居中,其中justify-content
用于设置弹性盒子元素在主轴(横向)方向上的对齐方式。
<div class="flex-center">
<div>
简单不先于复杂。
</div>
<div>
简单不先于复杂,而是在复杂之后。
</div>
<div>
而是在复杂之后。
</div>
</div>
.flex-center {
padding: 8px;
display: flex;
justify-content: center;
align-items:flex-end;
border: 2px dashed #f69c55;
}
.flex-center >div {
padding: 8px;
width: 4rem;
margin: 0 8px;
color: #fff;
background: #000;
}
.flex-center >div:first-child {
height: 45px;
}
.flex-center >div:last-child {
height: 45px;
}
flex-direction
决定主轴的方向(即项目的排列方向)flex-wrap
如果一条轴线排列不下,如何换行justify-content
定义了项目在主轴上的对齐方式align-items
定义项目在交叉轴上如何对齐
Flex布局教程:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2、垂直居中
2.1、单行行内元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。
<div id="box">
软件在能够复用前必须先能用。
</div>
#box {
height: 120px;
line-height: 120px;
border: 2px dashed #f69c55;
}
2.2、多行元素垂直居中
利用表格布局
利用表布局的vertical-align: middle
可以实现子元素的垂直居中 。
<div class="center-table">
<p class="v-cell">
The more technology you learn,<br>
the more you realize how little you know.
</p>
</div>
.center-table {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
利用flex布局
利用flex布局实现垂直居中,其中flex-direction: column
定义主轴方向为纵向。flex是在CSS3中定义,在较老的浏览器中存在兼容问题。
<div class="center-flex">
<p>
Dance like nobody is watching,<br>
code like everybody is.
</p>
</div>
.center-flex {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
2.3、块级元素垂直居中
固定高度的块级元素
已知居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可实现垂直居中。
<div class="parent">
<div class="child">控制复杂性是计算机编程的本质。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
color:#fff;
background: #000;
}
未知高度的块级元素
当垂直居中的块级元素高度未知时,可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中,部分浏览器可能存在兼容性问题。
<div class="parent">
<div class="child">世界上有 10 种人,懂二进制的和不懂二进制的。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: black;
color: #fff;
padding: 1rem;
width: 12rem;
}
3、水平垂直居中
3.1、固定宽高元素水平垂直居中
通过margin平移元素整体宽度的一半,使元素水平垂直居中。
<div class="parent">
<div class="child">控制复杂性是计算机编程的本质。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
width: 200px;
height: 80px;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -110px;
background: black;
color: #fff;
}
3.2、未知宽高元素水平垂直居中
利用2D变换,在水平和垂直方向都反向平移宽高的一半,从而使元素水平垂直居中。
<div class="parent">
<div class="child">当你试图解决一个你不理解的问题时,复杂化就产成了。当你试图解决一个你不理解的问题时,复杂化就产成了。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background: black;
}
3.3、利用flex布局
利用flex布局,其中justify-content用于设置或检索弹性盒子元素在主轴上方向上的对齐方式;而align-items属性定义flex子项在flex容器的当前行的侧轴方向上的对齐方式。
<div class="parent">
<div class="child">Facebook wasn't built in a day.</div>
</div>
.parent {
height: 140px;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #f69c55;
}
.child {
padding: 20px;
background: black;
color: #fff;
}
最后附赠一张居中总结的图
CSS实现居中的方式的更多相关文章
- 用CSS实现居中的方式
直接放链接吧,最近大量时间放在看书上了,不想玩游戏,不想看电影,只想看书,早日做出自己的网站卖广告. CSS居中
- CSS中居中的完全指南(中英对照翻译)
翻译自:https://css-tricks.com/centering-css-complete-guide/ Centering things in CSS is the poster child ...
- js、css引用文件的下载方式
js.css引用文件的下载方式 一.测试(chrome):1.直接使用<script...>.<link...>标签来混合引入脚本文件和css文件, <script as ...
- 【转】css布局居中和CSS内容居中区别和对应DIV CSS代码
原文地址:http://www.divcss5.com/jiqiao/j771.shtml css布局居中和CSS内容居中区别和对应DIV CSS代码教程与图文代码案例篇 对于新手来说DIV CSS布 ...
- 使用Flexbox实现CSS竖向居中
竖向居中需要一个父元素和一个子元素合作完成. <div class="flexbox-container"> <div>Blah blah</div& ...
- CSS标签居中
CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...
- css常用居中
对一个已知大小的元素上下左右居中(已知大小了,直接margin也就行了): css如下:.parent{height:100px;width:100px;background:grey;positio ...
- CSS样式之连接方式
前言:上一篇博客是HTML基本结构和标签,是笔者学习HTML的笔记,本篇博客开始记录CSS,废话不多说,直接进入主题. 首先,我们要知道CSS是什么.简单地说,CSS层叠样式表是用来表现HTML或XM ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
随机推荐
- 命令行下设置 PYTHONPATH 来正确运行Python代码
写Python程序,总要使用一些自己使用的库:在运行此类程序的时候,就需要先配置好 PYTHONPATH 环境变量:否则会导致找不到库错误. Windows下,可以写一个bat来简化配置: @ECHO ...
- HDU 2442
状态压缩DP , 和HDU2280极其相似 #include <cstdio> #include <cstring> #include <iostream> usi ...
- idea导入(import)项目和打开(open)项目的区别
前言: 每次接手老项目,都得从git或svn下载下来,但是如果之前的项目不是用idea写的怎么办,可是你又习惯啦idea,那你必须把项目在idea上跑起来,那是用import还是用open呢,如何抉择 ...
- Tyvj 1176 火焰巨魔的惆怅
Tyvj 1176 火焰巨魔的惆怅 背景 TYVJ2月月赛第一道 巨魔家族在某天受到了其他种族的屠杀,作为一个英雄,他主动担任了断后的任务,但是,在巨魔家族整体转移过后,火焰巨魔却被困住了,他出逃的方 ...
- 权限框架之Shiro详解(非原创)
文章大纲 一.权限框架介绍二.Shiro基础介绍三.Spring Boot整合Shiro代码实战四.项目源码与资料下载五.参考文章 一.权限框架介绍 1. 什么是权限管理 权限管理属于系统安全 ...
- 编程精粹--编写高质量C语言代码(3):自己设计并使用断言(二)
接着上一遍文章<<编程精粹--编写高质量C语言代码(2):自己设计并使用断言(一)>>,继续学习怎样自己设计并使用断言,来更加easy,更加不费力地自己主动寻找出程序中的错误. ...
- Windows 10 S中的Device Guard详解(上篇)
本文探讨Windows 10 S(下称Win10S)中的Device Guard(设备保护,下称DG).我将提取策略,并弄清楚在默认Win10S系统上可以和不可以运行什么.我将在下一篇文章中介绍在不安 ...
- IOS开发UI篇--一个支持图文混排的ActionSheet
一.简单介绍 UIActionSheet是IOS提供给我们开发人员的底部弹出菜单控件.一般用于菜单选择.操作确认.删除确认等功能.IOS官方提供的下面方式对UIActionView进行实例化: - ( ...
- WindowFromPoint -- 获得包括指定点的窗体的句柄
WindowFromPoint 函数功能: 该函数获得包括指定点的窗体的句柄. 函数原型: HWND WindowFromPoint(POINT Point): 參数: Point:指定一个被检 ...
- HDMI信号解析
参考资料:http://blog.sina.com.cn/s/blog_6cfd49b00102w00i.html: http://blog.csdn.net/gtkknd/article/detai ...