【CSS】水平居中和垂直居中
水平居中和垂直居中
2019-11-12 15:35:37 by冲冲
1、水平居中
（1）父级元素是行内元素，子级元素是行内元素，子级元素水平居中
① 设置父级元素为块级元素 display:block;
② 给父级元素添加 text-aglin:center;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 background-color: skyblue;
9 display:block;
10 text-align:center;
11 }
12 #son {
13 background-color: green;
14 }
15 </style>
16 </head>
17
18 <body>
19 <span id="father">
20 <span id="son">我将居中</span>
21 </span>
22 </body>
23 </html>
（2）父级元素是块级元素，子级元素是行内元素，子级元素水平居中
① 给父级元素添加 text-aglin:center;
（3）父级元素是块级元素，子级元素是块级元素，子级元素水平居中
方案一
（31）父级元素和子级元素有宽度
① 给子级元素添加 margin: 0 auto;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 }
12 #son {
13 width: 200px;
14 height: 100px;
15 background-color: green;
16 margin: 0 auto;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div id="father">
23 <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>
（32）父级元素有宽度，子级元素没有宽度（特点：会默认子元素的宽度和父元素一样）
① 设置子级元素为行内块元素 display:inline-block;
② 给父级元素添加 text-align:center;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 text-align: center;
12 }
13 #son {
14 background-color: green;
15 display: inline-block;
16 }
17 </style>
18 </head>
19
20 <body>
21 <div id="father">
22 <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>
方案二 -- 使用定位属性
（31）父级元素和子级元素有宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>居中测试</title>
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
left: 150px;
}
</style>
</head> <body>
<div id="father">
<div id="son">我将居中</div>
</div>
</body>
</html>
（32）父级元素有宽度，子级元素没有宽度
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 position: relative;
12 }
13 #son {
14 background-color: green;
15 position: absolute;
16 left: 50%;/*元素的左侧居中，而非元素的中心居中*/
17 transform: translateX(-50%);/*把元素沿着横向(x轴)移动自身宽度的50%*/
18 }
19 </style>
20 </head>
21
22 <body>
23 <div id="father">
24 <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>
注意：left:50%;不会中心居中，而是左边居中。
方案三 -- flexbox布局
使用flex布局，宽度有或无都OK。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 display: flex;
12 justify-content: center;
13 }
14 #son {
15 background-color: green;
16 }
17 </style>
18 </head>
19
20 <body>
21 <div id="father">
22 <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>
2、垂直居中
（1）父级元素是块元素，子级元素是行内元素，子级元素垂直居中
（11）单行文本居中
① 父级元素设置行高等于盒子高 height=500px;line-height:500px;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 line-height: 300px;
12 }
13 #son {
14 background-color: green;
15 }
16 </style>
17 </head>
18
19 <body>
20 <div id="father">
21 <div id="son">我将居中</div>
22 </div>
23 </body>
24 </html>
（12）多行文本居中
① 父级元素设置 display:table-cell;vertical-align:middle;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 display:table-cell;
12 vertical-align: middle;
13 }
14 #son {
15 background-color: green;
16 }
17 </style>
18 </head>
19
20 <body>
21 <div id="father">
22 <div id="son">我将居中我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</div>
23 </div>
24 </body>
25 </html>
（2）父级元素和子级元素都是块级元素
（21）父级元素和子级元素都有高度
方案一 -- 使用定位
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 position: relative;
12 }
13 #son {
14 background-color: green;
15 height: 100px;
16 position: absolute;
17 top: 100px;
18 }
19 </style>
20 </head>
21
22 <body>
23 <div id="father">
24 <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>
方案二 -- flexbox布局（子级元素高度有或无都OK）
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 display: flex;
12 align-items: center;
13 }
14 #son {
15 background-color: green;
16 height: 100px;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div id="father">
23 <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>
（22）父级元素有高度，子级元素没有高度
方案一 -- 定位属性
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 position: relative;
12 }
13 #son {
14 background-color: green;
15 position: absolute;
16 top: 50%;
17 transform: translateY(-50%);
18 }
19 </style>
20 </head>
21
22 <body>
23 <div id="father">
24 <div id="son">我将居中</div>
25 </div>
26 </body>
27 </html>
方案二 -- flexbox布局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 display: flex;
12 align-items: center;
13 }
14 #son {
15 background-color: green;
16 }
17 </style>
18 </head>
19
20 <body>
21 <div id="father">
22 <div id="son">我将居中</div>
23 </div>
24 </body>
25 </html>
3、同时水平和垂直居中
（1）父级元素和子级元素都已知高度和宽度
① flexbox布局推荐
② 定位属性
（2）父级元素已知高度和宽度，子级元素没有高度和宽度
① flexbox布局
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 }
15 #son {
16 background-color: green;
17 }
18 </style>
19 </head>
20
21 <body>
22 <div id="father">
23 <div id="son">我将居中</div>
24 </div>
25 </body>
26 </html>
② 定位属性
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>居中测试</title>
6 <style>
7 #father {
8 width: 500px;
9 height: 300px;
10 background-color: skyblue;
11 position: relative;
12 }
13 #son {
14 background-color: green;
15 position: absolute;
16 left:50%;
17 top:50%;
18 transform:translateX(-50%) translateY(-50%);
19 }
20 </style>
21 </head>
22
23 <body>
24 <div id="father">
25 <div id="son">我将居中</div>
26 </div>
27 </body>
28 </html>
【CSS】水平居中和垂直居中的更多相关文章
- CSS 水平居中与垂直居中
前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...
- CSS水平居中和垂直居中解决方案
一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...
- CSS 水平居中/布局 垂直居中 （月经问题）
水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...
- css水平居中和垂直居中
水平居中:内联元素:text-align:center;相对于父级居中显示块级元素:margin:0 auto;但是需要同时width,否则无法看到效果多个块级元素居中:在此想要探讨一下display ...
- CSS 水平居中和垂直居中
1.水平居中——行内元素 text-align: center; 2.水平居中——定宽块状元素 margin: auto,满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto” ...
- CSS水平居中与垂直居中的方法
一.水平居中 1.行内元素水平居中 在父元素里添加text-align:center即可.代码如下: <style> .container-1 { height: 50px; border ...
- CSS的水平居中和垂直居中解决方案
在写CSS样式的时候,有时为了美观,会添加水平居中和垂直居中,这时候你有可能会遇到很棘手的问题,有些水平居中和垂直居中的属性添加上去完全没反应,下面给大家列举一些CSS水平居中和垂直居中的终极解决方案 ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- CSS中元素水平居中和垂直居中的方法
#CSS中水平居中和垂直居中的方法 一. 水平居中 1.行内元素(文本,图片等) 如果被设置元素为文本.图片等行内元素时,可以通过给父元素设置` text-align:center;` 来实现 2.定 ...
随机推荐
- spoj2 prime1 （区间筛）
给定t组询问,每组询问包括一个l和r,要求\([l,r]\)的素数有哪些 其中\(t \le 10,1 \le l \le r \le 1000000000 , r-l \le 100000\) Qw ...
- Linux系统安装MySql5.7并通过sql脚本导入数据
为了下载到的MySQL版本和目标系统相互兼容,在开启之前,最好了解目标系统的相关信息. 查询系统版本: cat /etc/issue 查看系统位数 getconf LONG_BIT 选择MySQL 根 ...
- Linux环境下安装java的方法
linux安装java步骤 方式一:yum方式下载安装 1.查找java相关的列表 yum -y list java* 或者 yum search jdk 2.安装jdk yum install ja ...
- 短短 29 天，应对高峰 100W+ 访问，看浙大如何交出满分答卷
疫情期间"停课不停教,停课不停学",线上开课第一天,浙江大学网上开课平台访问量即突破100 万次,访客数3万余人,最高峰达 1.1万人同时在线,发起课程直播2000余场,然而系统却 ...
- CSDN app分析
项目 内容 这个作业属于哪个课程 2020春季计算机学院软件工程(罗杰 任健) (北京航空航天大学 - 计算机学院) 这个作业的要求在哪里 个人博客作业-软件案例分析 我的教学班级 005 说说csd ...
- netty入门实现简单的echo程序
最近看以往在程序中编写的代码,发现有一个功能是使用socket通讯来实现的,而那个时候使用的是基于bio的阻塞io来实现的,最近在看netty,发现可以使用netty来使用nio的方式来实现,此博客记 ...
- 2021.8.16考试总结[NOIP模拟41]
T1 你相信引力吗 肯定是单调栈维护.但存在重复值,还是个环,不好搞. 发现取区间时不会越过最大值,因此以最大值为断点将环断为序列.在栈里维护当前栈中有多少个与当前元素相等的元素,小分类讨论一下. 最 ...
- 基于Vue的工作流项目模块中，使用动态组件的方式统一呈现不同表单数据的处理方式
在基于Vue的工作流项目模块中,我们在查看表单明细的时候,需要包含公用表单信息,特定表单信息两部分内容.前者表单数据可以统一呈现,而后者则是不同业务的表单数据不同.为了实现更好的维护性,把它们分开作为 ...
- 对JavaScript中局部变量、全局变量和闭包的理解
对js中局部变量.全局变量和闭包的理解 局部变量 对于局部变量,js给出的定义是这样的:在 JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它.(该变量的作用域 ...
- vim 删除 替换
1,删除包含pattern的某一行 :g/pattern/d 或 :%g/pattern/d 2,删除不包含pattern的某一行 :v/pattern/d 或 :g!/pattern/d 3,替换 ...