【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.定 ...
随机推荐
- 每日总结：Java课堂测试第三阶段第一次优化 （2021.9.20）
package jisuan2; import java.util.*;public class xiaoxue { public static void main(String[] args) { ...
- 洛谷2046 NOI2010海拔
QwQ题目太长 这里就不复制了 题目 这个题...算是个比较经典的平面图最小割变成对偶图的最短路了QwQ 首先考虑最小割应该怎么做. 有一个性质,就是每个点的海拔要么是1,要么是0 QwQ不过这个我不 ...
- SpringBoot-自动装配2
配置文件到底能写什么?怎么写? SpringBoot官方文档中有大量的配置,直接去记忆的话,好像不是我们程序员的行事风格! 分析自动配置原理 能自动配置的组件一般都有命名为下面规则的两个类: xxxx ...
- 微软Windows11安卓子系统已支持运行APK 应用(附手把手详细安装攻略)怎么安装安卓/如何安装安卓应用/支持多窗口多任务
10 月 21 日消息,微软博客宣称,Windows 11 上 安卓子系统运行 Android 应用程序的第一个预览版现已提供给美国 Beta 频道的 Windows 内部人员.但现在通过教程 ...
- JVM：Java中的引用
JVM:Java中的引用 本笔记是根据bilibili上 尚硅谷 的课程 Java大厂面试题第二季 而做的笔记 在原来的时候,我们谈到一个类的实例化 Person p = new Person() 在 ...
- [no code][scrum meeting] Beta 10
$( "#cnblogs_post_body" ).catalog() 例会时间:5月25日15:00,主持者:伦泽标 下次例会时间:5月26日11:30,主持者: 一.工作汇报 ...
- 表单编辑时el-form的validate方法执行无效,阻塞代码运行 - Element UI踩坑记录
今天在用element-ui写管理后台需求时,遇到一个奇怪的问题 一个正常带校验的表单,在新增列表数据时表单校验功能正常: 但是在新增之后再去编辑数据时,表单校验却失效了,甚至阻塞了后续的代码执行,控 ...
- MVC +Jqyery+Ajax 实现弹出层提醒
CSS部分: /*登录提示*/ * {margin: 0; padding: 0; } .layer { width: 350px; padding: 20px; background: #fff; ...
- 另类加法 牛客网 程序员面试经典 C++ Python
另类加法 牛客网 程序员面试经典 C++ Python 题目描述 请编写一个函数,将两个数字相加.不得使用+或其他算数运算符. 给定两个int A和B.请返回A+B的值 测试样例: 1,2 返回:3 ...
- Git 极速上手(超简单)
前言:本文主要介绍了一种快速入门使用Git的方法,通过四步完成本地仓库构建和推送到远程仓库(Github.Gitee码云),简单说明最常用的命令,不需要明白Git的原理即可使用,本文不介绍具体原理. ...