一、居中

行内元素：

水平居中：text-align：center

垂直居中：单行——行高等于盒子高度

垂直居中：多行——display:table-cell、vertical-align: middle

块级元素：

水平居中：margin：0 auto、absolute+left50%+margin-left/translateX(-50%)、
flex+ justify-content: center

垂直居中：absolute+top50%+margin-top/translateY(-50%)、
flex+ align-items: center

水平垂直居中：同时使用水平居中和垂直居中

二、水平居中

1. 行内元素水平居中

行内元素水平居中：text-align：center

<style>.father {width: 400px;height: 200px;background-color: pink;/* 主要代码：text-align: center; */text-align: center;}.son {}
</style><body><div class="father"><span class="son">我是行内元素，我想水平居中</span></div>
</body>

2. 块级元素水平居中

2.1 使用margin: 0 auto

<head><style>.father {width: 400px;height: 200px;background-color: pink;}.son {width: 200px;height: 100px;background-color: skyblue;margin: 0 auto;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素，我想水平居中。</div></div>
</body>

2.2 使用position

<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;left: 50%;/* 如果元素没有设置宽度，不能使用margin-left，可以使用transform: translateX(-50%); 效果相同*/margin-left: -100px;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素，我想水平居中。</div></div>
</body>
</html>

2.3 使用flex

<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;justify-content: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素，我想水平居中。</div></div>
</body>
</html>

三、垂直居中

1. 行内元素

1.1 单行行内元素垂直居中

单行行内元素垂直居中：行高等于盒子高度

<head><style>.father {width: 400px;height: 200px;/* 行高等于盒子高度：line-height: 200px; */line-height: 200px;background-color: pink;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行内元素，我想垂直居中</span></div>
</body>

1.2 多行行内元素垂直居中

多行行内元素垂直居中：display:table-cell、vertical-align: middle
单行行内元素垂直居中方式不适合多行文本，会变成下图：

<head><style>.father {width: 400px;height: 200px;/* 主要代码：display: table-cell; vertical-align: middle;*/display: table-cell;background-color: pink;vertical-align: middle;}.son {}</style>
</head>
<body><div class="father"><span class="son">我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。我是行内元素，我想垂直居中。</span></div>
</body>

2. 块级元素

2.1 使用position

<head><style>.father {width: 400px;height: 200px;background-color: pink;position: relative;}.son {width: 200px;height: 100px;background-color: skyblue;position: absolute;top: 50%;/* 如果元素没有设置高度，不能使用margin-top，可以使用transform: translateY(-50%); 效果相同*/margin-top: -50px;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素，我想垂直居中。</div></div>
</body>
</html>

2.2 使用flex

<head><style>.father {width: 400px;height: 200px;background-color: pink;display: flex;align-items: center;}.son {width: 200px;height: 100px;background-color: skyblue;}</style>
</head>
<body><div class="father"><div class="son">我是块级元素，我想垂直居中。</div></div>
</body>
</html>

CSS基础知识（五）：水平居中和垂直居中相关推荐

css点击a标签显示下划线_好程序员HTML5培训教程-html和css基础知识
好程序员HTML5培训教程-html和css基础知识,Html是超文本标记语言(英语全称:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. Css ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
CSS基础知识: 框架
CSS基础知识整理框架 box 文章目录 CSS基础知识整理框架 box 长度单位颜色单位框架(盒子) 边框 border 外边距 margin 外边距和并(垂直布局) overflow 高度 ...
CSS基础知识（高级技术）
CSS基础知识元素的显示与隐藏 display 显示 visibility 可见性 overflow 溢出 CSS用户界面样式鼠标样式cursor 轮廓线 outline 防止拖拽文本域resiz ...
git 分支复制_Git基础知识(五)
Git基础知识(五) 分支都说Git的分支是它的必杀技特性,由于没有接触过太多的版本管理工具,就使用过的SVN来说,两者真的差别巨大.SVN创建一个分支,需要将内容复制一遍!这个时间真的是非常的漫长 ...
〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
HTML/CSS基础知识（四）
WEB标准和W3C的理解与认识 Web标准是一系列标准的集合. 网页主要由三部分组成:结构(Structure).表现(Presentation)和行为(Behavior). 对应的标准也分三方面:结 ...
html css基础知识
1 这是自己学习html时候做的一些记录,供大家参考 <!-- 2 块和内联3 块元素:独占一行的元素4 div p h ul5 div没有任何语义,就是一个纯粹的快元素6 就是为了方便布局7 ...
CSS基础知识（一）：选择器
文章目录前言一.CSS基础知识二.选择器 1.选择器 2.基础选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 通配符选择器 2.5 基础选择器总结 3.复合选择器 3. ...
CSS基础知识---三种选择器
CSS基础知识---三种选择器选择器标签选择器 id选择器 class选择器全部代码选择器标签选择器 id选择器 class选择器标签选择器选择器优先级:id>class>标 ...

CSS基础知识（五）：水平居中和垂直居中

文章目录

一、居中

二、水平居中

1. 行内元素水平居中

2. 块级元素水平居中

2.1 使用margin: 0 auto

2.2 使用position

2.3 使用flex

三、垂直居中

1. 行内元素

1.1 单行行内元素垂直居中

1.2 多行行内元素垂直居中

2. 块级元素

2.1 使用position

2.2 使用flex

CSS基础知识（五）：水平居中和垂直居中相关推荐

最新文章

热门文章