【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.定 ...
随机推荐
- C#开发BIMFACE系列47 IIS部署并加载离线数据包
BIMFACE二次开发系列目录 [已更新最新开发文章,点击查看详细] 在前两篇博客<C#开发BIMFACE系列45 服务端API之创建离线数据包>与<C#开发BIMFACE系 ...
- L1-027 出租 (20 分) java题解
下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2]=1,index[1]=0 对 ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 常用Java API：Math类
求最值 最小值 Math.min(int a, int b) Math.min(float a, float b) Math.min(double a, doubleb) Math.min(long ...
- GPS与AGPS定位服务
最近客户反馈车子启动从车库开到地面后,机器定位相对OBD内部定位会慢很多. 机器定位主要依赖定位模块 + AGPS辅助定位. 其中定位模块目前主流支持的有以下三种定位系统. 一.GPS(全球定位系统) ...
- 第01课 OpenGL窗口（3）
接下来的代码段创建我们的OpenGL窗口.我花了很多时间来做决定是否创建固定的全屏模式这样不需要许多额外的代码,还是创建一个容易定制的友好的窗口但需要更多的代码.当然最后我选择了后者.我经常在EMai ...
- PWN二进制漏洞学习指南
目录 PWN二进制漏洞学习指南 前言 前置技能 PWN概念 概述 发音 术语 PWN环境搭建 PWN知识学习途径 常见漏洞 安全机制 PWN技巧 PWN相关资源博客 Pwn菜鸡小分队 PWN二进制漏洞 ...
- APP 自动化之手势操作appium提供API详解(四)
一.手势操作1.上下左右滑屏 swipe---滑动 java-client 4.x 是有swipe方法的,可以通过传递坐标信息就可以完成滑动androidDriver.swipe(startx, st ...
- LeetCode 重排链表 OPPO笔试
重排链表 几个关键点: 1. 双指针(快慢指针找中点)(用于反转后一部分) 2. 反转后一部分 (reverse函数) 3. 合并链表 合并的时候在笔试的时候想了一种比我之前想的简单的方法 从slow ...
- Mysql教程：（三）运算符：数学运算符
运算符:数学运算符 mysql> select class,number,maths,maths+5 from score; mysql>select class,number,chine ...