【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.定 ...
随机推荐
- 洛谷T31018 经典题丶改（LCT+离线）
真的是一个大好题啊! QWQ首先我们考虑这种问题,如果直接在线做,估计应该是做不了,那我们是不是可以直接考虑离线. 将所有询问都按照\(r\)来排序. 然后依次加入每条边,计算\(a[i]<=n ...
- PTA数据结构 习题2.1 简单计算器 (20分)
习题2.1 简单计算器 (20分) 模拟简单运算器的工作.假设计算器只能进行加减乘除运算,运算数和结果都是整数,四种运算符的优先级相同,按从左到右的顺序计算. 输入格式: 输入在一行中给出一个四则运算 ...
- Vim 不区分大小写
Vim 不区分大小写 忽略:set ignorecase 恢复:set noignorecase
- 【UE4】GAMES101 图形学作业2：光栅化和深度缓存
总览 在上次作业中,虽然我们在屏幕上画出一个线框三角形,但这看起来并不是那么的有趣.所以这一次我们继续推进一步--在屏幕上画出一个实心三角形,换言之,栅格化一个三角形.上一次作业中,在视口变化之后,我 ...
- 【UE4 C++】调用外部链接库 lib静态库
简述 本例以插件形式测试 使用Lib引用,打包程序运行不用再拷贝lib文件 需要 lib 文件和 .h 头文件 lib部分的代码 .h 头文件 #pragma once #ifndef __MYTES ...
- Redis：学习笔记-04
Redis:学习笔记-04 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 10. Redis主从复制 1 ...
- java中生成和验证jwt
在这篇文章中主要记录一下在Java中如何使用 java 代码生成jwt token,主要是使用jjwt来生成和验证jwt,关于什么是JWT,以及JWT可以干什么不做详解. jwt的格式: base64 ...
- NOIP模拟84(多校17)
T1 宝藏 解题思路 考场上一眼出 \(nlog^2\) 做法,然后没看见是 1s 3e5 的数据,我竟然以为自己切了?? 考完之后尝试着把二分改为指针的移动,然后就过了??或许是数据水吧,感觉自己的 ...
- [调试笔记] 10.8模拟赛11 T4 甜圈
这题正解线段树维护哈希,同机房神犇已经讲的很明白了.这里只说sbwzx在调试的时候犯的sb错误. 1.关于pushdown和update 众所周知,sbwzx一写带lazy的线段树,就必在pushdo ...
- 设计模式 - Bridge 桥模式
Bridge桥模式也属于"的单一职责"模式中的典型模式.问题描述:我们绘制图形时,图形可以有不同形状以及不同颜色,比如圆形可以是红的,绿的,方形可以是红的绿的,如果用代码来描绘这些 ...