cssform居中_css元素居中指南，细节决定成败⼀、元素分类
⾸先要知道元素分三种：内联元素(⾏内元素)、块级元素、内联块级元素。
1、内联(⾏内)元素
可与其他元素占⼀⾏
⾼、⾏⾼、内外边距不可更改
宽度为内容所占宽度，不可更改
容纳⽂本或其他⾏内元素
2、块级元素
独占⼀⾏
⾼、⾏⾼、内外边距可更改
不设置宽度的话宽度默认为容器的100%
可容纳⾏内元素和块级元素
3、内联块级元素
可与其他元素在⼀⾏
⾼、宽、⾏⾼以及上下边距可更改
常见内联(⾏内)元素：
a - 锚点
b - 粗体
br - 换⾏
cite - 引⽤
code - 计算机代码
em - 强调
i - 斜体
img - 图⽚
input - 输⼊框
label - 表格标签
span - 常⽤内联容器，定义⽂本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多⾏⽂本输⼊框
常见块级元素：
address - 联系⽅式
audio - ⾳频
vedio - 视频
article - ⽂章
blockquote - 块引⽤
div - ⽂档分区
form - 表单
section - 页⾯区段
h1 - ⼤标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - ⽔平分隔线
header - 页头
menu - 菜单列表
ol - 排序列表
ul - ⾮排序列表
p - 段落
table - 表格
常见的内联块级元素有：
img - 图⽚
input - 输⼊
⽐如：
img{display: inline-block;}
⼆、⽔平居中
1、内联元素⽔平居中
(1)⽗级为块级元素的内联元素使⽤text-align: center
p{ background-color: cyan; text-align: center;}
我是内联⽂本
可以看到块级元素p是默认宽度是整个容器的100%，并且其容纳的⽂本是内联元素，使⽤text-align: center让其⽔平居中。
text-align: center仅对内联元素有效，包括内联块级元素。⽐如对inline, inline-block, inline-table, inline-flex的元素同样有效，因为inline-block值将内部div显⽰为嵌⼊式元素和块，因此外部div中的属性text-align将内部div居中。
2、块级元素⽔平居中
(1)单个块使⽤margin: 0 auto
有时需要居中的不是⽂本，⽽是整个块。我们希望左右边距相等，⽅法是将边距设置为“auto”。
这通常⽤于固定宽度的块，如果块本⾝是灵活的，它将占⽤所有宽度，当然，居中效果可能就不明显了，因为它占了整个宽度。
⽆论正在居中的块级别元素或⽗元素的宽度是多少，这都是有效的。
.block { width: 200px; margin: 0 auto; background-color: aquamarine;}
我是⼀个块，设宽度可见居中效果，不设宽度占满整个可⽤宽度
text align center
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学
视频，PDF)
(2)⽗级为块级元素的块级元素⽔平居中
1)使⽤table布局加左右边距⾃适应
因为块级元素设为表格布局之后，将块级变为了内部单元格
.child-3 { display: table; margin: 0 auto;}
块级元素(display:table) + (margin:0 auto)
2)多个块级元素在⼀⾏居中
当想让多个块级元素在⼀⾏内居中时，有两种办法：
第⼀种：将块级元素变为内联块级元素：display: inline-block
当把多个块级元素变为内联块级元素时，就可以使⽤内联元素居中的办法text-align: center；居中了：
.box { text-align: center; background-color: aquamarine;}.inline-block { width: 100px; height: 50px; border: 1px #333 solid; display: inline-block;}
块级1
块级2
块级3
给每个块级元素设置宽⾼只是为了显⽰效果。
第⼆种：使⽤flex布局
.box { display: flex; justify-content: center;}.box-child { width: 100px; height: 50px; text-align: center; // 是为了把块级元素中的内联⽂本居中 border: 1px #333 solid;}块级1
块级2
块级3
3)多个块级元素在⼀列居中
这个也属于块级中的块级⽔平居中。
.
box p{ margin: 0 auto;}.box-child { width: 100px; height: 50px; text-align: center; // 是为了把块级元素中的内联⽂本居中 border: 1px #333 solid;}
块级1
块级2
块级3
(3)定位块级元素：⽗相⼦绝 + transform
⽗元素使⽤相对定位，⼦元素使⽤绝对定位。
使⽤了相对定位，就有指定的top，bottom，left，和right。⼦元素的对象使⽤绝对定位是以设置相对定位的⽗元素为基础偏移的，如果没
有设置相对定位的⽗元素，就以⽂档为基础进⾏偏移。
由于绝对定位是脱离⽂档流的，最好尽量避免使⽤。
在对使⽤绝对定位的元素居中时，如果该元素有固定⼤⼩，在偏移后，仅需使⽤边距进⾏补偿即可。
步骤如下：
需居中元素设置left: 50%，这使该元素的左边缘与⽗元素50%的线对齐。
添加⼀个负边距，⼤⼩为元素宽度的⼀半，使得该元素的⼀半往左移动，中⼼点与⽗元素50%线对齐。
使⽤transform时，需要兼容浏览器。
.parent { position: relative;}/* 注意兼容 */.child-4-1 { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-trans
定位块级元素(⽗相⼦绝)
3、浮动元素⽔平居中
浮动float是CSS中最常⽤的布局技术，当使⽤float: left设置元素样式时，之后元素将重新排版。⽂档流是指内容的顺序以及元素之间如何
排列。如果被浮动的元素没有设置宽度，它将折叠为内容的宽度。如果之后的元素⽐剩余的空间更⼩，它将向右移动。请记住，设置为
display: block的元素需要有⼀个固定宽度，否则它将独占⼀⾏。
可以通过在样式表中为元素提供⼀个clear属性来防⽌元素重新排版。⽐如clear: both、clear: left和clear: right，还可以使⽤clear: none
来覆盖默认⾏为。
因为被浮动的⼦元素会导致⽗元素崩溃，所以你会很想同时创建新元素来添加clear：防⽌这种⾏为。虽然这是可⾏的，但我们希望保持标记
的语义性，因此应该只使⽤CSS来实现。通过使⽤伪元素::after可以创建⼀个清除浮动clearfix：
.container::after { clear: both; content: ''; display: table;}
浮动适合⼤型容器，不太适⽤于⽂本元素，因为它很难对齐。使⽤display: inline-block更适合，请参考上⽅的内联元素⽔平居中。
想要是浮动的元素居中怎么办呢，只有向左向右浮动，没有向中间浮动，这需要⼀个中间线，所以设置给浮动元素设置⼀个⽗元素，以⽗元
素的中间线为居中标准即可。
(1)浮动元素指定宽：位相 + 负宽⼀半margin
如果浮动元素需要指定宽度，则在浮动的时候需要以宽度的⼀半值为负边距补偿。
.child { position: relative; float: left; width: 250px; left: 50%; margin-left: -125px;}
指定宽度：⼦位相左浮，负⼀半宽度margin
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学
视频，PDF)
(2)浮动元素不指定宽：⽗⼦位相左浮，左右各50%
.parent { position: relative; // 位相 float: left; // 左浮 left: 50%; // 左50%}.child-2-2--p { position: relative; // 位相 float: left; // 左浮 right: 50%; // 右50%}
不指定宽度：⽗⼦位相左浮，左右各50%
(3)浮动元素通⽤(有⽆定宽皆可)：flex
.parent { display:flex; justify-content:center;}.chlid{ float: left;}
有⽆定宽皆可： flex
以下是例⼦效果：
三、垂直居中
1、内联元素垂直居中
(1)单⾏内联元素
1)使⽤填充
有时候，内联/⽂本元素可以垂直居中显⽰，仅仅是因为它们的上下填充相同。
.parent { padding-top: 10px; padding-bottom: 10px;}.child { background-color: cornflowerblue; display: flex; flex-direction: column; justify-content: center; h
1、单⾏⾏内元素使⽤上下填充相同实现垂直居中
web前端开发学习Q-q-u-n：784783012 ，分享学习的⽅法和需要注意的⼩细节，不停更新最新的教程和学习⽅法(详细的前端项⽬实战教学视频，PDF)
2)使⽤⾏⾼
如果没有填充可以选择时，可以使⽤⾏⾼
.parent { background-color: aquamarine;}.child { height: 50px; line-height: 50px;}
1、单⾏⾏内元素使⽤⾏⾼实现垂直居中
(2)多⾏内联元素
1)使⽤dispaly:table

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。