css元素居中指南

时间  2020-02-29
标签 css 元素 居中 指南 栏目 CSS 繁體版
原文   原文链接
若有错误，欢迎指正。更多内容查看 GitHub

1、元素分类

首先要知道元素分三种：内联元素（行内元素）、块级元素、内联块级元素。css

一、内联（行内）元素

  • 可与其余元素占一行
  • 高、行高、内外边距不可更改
  • 宽度为内容所占宽度，不可更改
  • 容纳文本或其余行内元素

二、块级元素

  • 独占一行
  • 高、行高、内外边距可更改
  • 不设置宽度的话宽度默认为容器的100%
  • 可容纳行内元素和块级元素

三、内联块级元素

  • 可与其余元素在一行
  • 高、宽、行高以及上下边距可更改

常见内联（行内）元素：git

  • a - 锚点
  • b - 粗体
  • br - 换行
  • cite - 引用
  • code - 计算机代码
  • em - 强调
  • i - 斜体
  • img - 图片
  • input - 输入框
  • label - 表格标签
  • span - 经常使用内联容器，定义文本内区块
  • strike - 中划线
  • strong - 粗体强调
  • sub - 下标
  • sup - 上标
  • textarea - 多行文本输入框

常见块级元素：github

  • 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 - 表格

常见的内联块级元素有：web

  • img - 图片
  • input - 输入

好比：浏览器

img{display: inline-block;}

2、水平居中

一、内联元素水平居中

（1）父级为块级元素的内联元素使用text-align: center 

p{
  background-color: cyan;
  text-align: center;
}
<p>我是内联文本</p>

能够看到块级元素p是默认宽度是整个容器的100%，而且其容纳的文本是内联元素，使用text-align: center让其水平居中。ide

text-align: center仅对内联元素有效，包括内联块级元素。好比对inline, inline-block, inline-table, inline-flex的元素一样有效，由于inline-block值将内部div显示为嵌入式元素和块，所以外部div中的属性text-align将内部div居中。布局

二、块级元素水平居中

（1）单个块使用margin: 0 auto

有时须要居中的不是文本，而是整个块。咱们但愿左右边距相等，方法是将边距设置为“auto”。flex

这一般用于固定宽度的块，若是块自己是灵活的，它将占用全部宽度，固然，居中效果可能就不明显了，由于它占了整个宽度。ui

不管正在居中的块级别元素或父元素的宽度是多少，这都是有效的。this

.block {
    width: 200px;
    margin: 0 auto;
    background-color: aquamarine;
}
<div class="block">我是一个块，设宽度可见居中效果，不设宽度占满整个可用宽度</div>

（2）父级为块级元素的块级元素水平居中

1）使用table布局加左右边距自适应

由于块级元素设为表格布局以后，将块级变为了内部单元格

.child-3 {
    display: table;
    margin: 0 auto;
}

<div class="child">块级元素(display:table) + (margin:0 auto)</div>
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;
}
<div class="box">
    <p class="inline-block">块级1</p>
    <p class="inline-block">块级2</p>
    <p class="inline-block">块级3</p>
</div>

给每一个块级元素设置宽高只是为了显示效果。

第二种：使用flex布局

.box {
    display: flex;
    justify-content: center;
}
.box-child {
    width: 100px;
    height: 50px;
    text-align: center; // 是为了把块级元素中的内联文本居中
    border: 1px #333 solid;
}

<div class="box">
    <p class="box-child">块级1</p>
    <p class="box-child">块级2</p>
    <p class="box-child">块级3</p>
</div>
3）多个块级元素在一列居中

这个也属于块级中的块级水平居中。

.box p{
    margin: 0 auto;
}
.box-child {
    width: 100px;
    height: 50px;
    text-align: center; // 是为了把块级元素中的内联文本居中
    border: 1px #333 solid;
}
<div class="box">
    <p class="box-child">块级1</p>
    <p class="box-child">块级2</p>
    <p class="box-child">块级3</p>
</div>

（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-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}
<div class="parent">
    <div class="child">定位块级元素(父相子绝)</div>
</div>

三、浮动元素水平居中

浮动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;
}
<div class="parent">
    <div class="child">
        指定宽度：子位相左浮，负一半宽度margin
    </div>
</div>

（2）浮动元素不指定宽：父子位相左浮，左右各50%

.parent {
    position: relative; // 位相
    float: left;        // 左浮
    left: 50%;           // 左50%
}
.child-2-2--p {
    position: relative; // 位相
    float: left;        // 左浮
    right: 50%;           // 右50%
}

<div class="parent">
    <div class="child">
        不指定宽度：父子位相左浮，左右各50%
    </div>
</div>

（3）浮动元素通用（有无定宽皆可）：flex

.parent {
    display:flex;
    justify-content:center;
}
.chlid{
    float: left;
}
<div class="parent">
  <span class="chlid">有无定宽皆可： flex</span>
</div>

如下是例子效果：

图片描述

3、垂直居中

一、内联元素垂直居中

（1）单行内联元素

1）使用填充

有时候，内联/文本元素能够垂直居中显示，仅仅是由于它们的上下填充相同。

.parent {
    padding-top: 10px;
    padding-bottom: 10px;
}

.child {
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 50px;
}
<div class="parent">
    <span class="child">一、单行行内元素使用上下填充相同实现垂直居中</span>
</div>
2）使用行高

若是没有填充能够选择时，可使用行高

.parent {
    background-color: aquamarine;
}
.child {
    height: 50px;
    line-height: 50px;
}

<div class="parent">
    <span class="child">一、单行行内元素使用行高实现垂直居中</span>
</div>

（2）多行内联元素

1）使用dispaly:table

多行内联元素也可使用上下相同的填充实现居中效果，但若是这不起做用，可能文本所在的元素能够是一个表格单元格，或者是字面上的表格单元格，亦或者是用CSS建立的表格单元格。

.parent {
    height: 100px;
    background-color: cyan;
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

<div class="parent">
    <p class="child">三、多行行内元素父级使用dispaly:table (Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>
2）使用flex

记住，只有父容器有固定高度时，才能够实现。

.parent {
    background-color: cornflowerblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100px;
}

<div class="parent">
    <p class="child">四、多行行内元素父级使用flex-direction:column (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>
3）使用伪元素
.parent {
    position: relative;
    background-color: thistle;
}
.parent::before {
    content: '';
    vertical-align: middle;
}
.child {
    display: inline-block;
    vertical-align: middle;
}

<div class="child-pseudo">
    <p class="child-pseudo--p">五、多行行内元素父级使用伪元素 (Lorem ipsum, dolor sit amet consectetur
adipisicing elit.
Vel, quos ratione, ea
accusantium voluptas )</p>
</div>

二、块级元素垂直居中

（1）定高：父相子绝 + 上50% + 负上高度一半margin

.parent {
    position: relative;
    background-color: coral;
}
.child {
    position: absolute;
    height: 25px;
    top: 50%;
    margin-top: -12.5px;
}
<div class="parent">
    <div class="child">一、父位相，子绝+指定高度+top50%+负高度一半margin</div>
</div>

（2）高度未知： 三种方法

1）父相子绝 + 上50% + 上偏移50%
.parent {
    position: relative;
    background-color: coral;
}
.child {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
<div class="parent">
    <div class="child">一、父位相，子绝+指定高度+top50%+负高度一半margin</div>
</div>
2）父级table布局 + 子table-cell + vertical-align: middle
.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
}
<div class="parent">
    <div class="child">高度未知：父级table-cell + 子vertical-align: middlemargin</div>
</div>
3）父级flex + align-items:center
.parent {
    display: flex;
    align-items: center;
}
<div class="parent">
    <div class="child">高度未知：父级flex+align-items:center</div>
</div>
4）父级flex+flex-direction + justify-content
.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
<div class="parent">
    <div class="child">高度未知：父级flex+flex-direction + justify-content</div>
</div>

如下是垂直居中全部效果：

图片描述

4、水平垂直居中

一、定宽高 ： 父相+子绝左上50%负margin左上负一半高度

.parent {
    position: relative;
}

.child {
    width: 500px;
    height: 100px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -50px 0 0 -250px;
}
<div class="parent">
    <div class="child">父相子绝 + transform</div>
</div>

二、宽高未知：父相子绝 + transform

.parent {
    position: relative;
}

.child {
    position:absolute;
    left:50%; 
    top:50%;
    transform: translate(-50%,-50%); 
}
<div class="parent">
    <div class="child">父相子绝 + transform</div>
</div>

三、父flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
<div class="parent">
    <div class="child">父flex + justify-content + align-items</div>
</div>

四、父grid/flex + 子magin:auto

.parent {
    /* display: flex; */
    display: grid;
    height: 50px;
    background-color: darksalmon;
}
.child {
    margin: auto;
}
<div class="parent">
    <div class="child">父grid/flex + 子magin:auto</div>
</div>

五、父table-cell布局 + vertical-align + text-align

.parent {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<div class="parent">
    <div class="child">父table-cell布局 + vertical-align + text-align</div>
</div>

六、父相子绝 + 上下左右0 + margin:auto

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

<div class="parent">
    <div class="child">父相子绝 + 上下左右0</div>
</div>

如下是例子效果：
图片描述

参考：

centering-css-complete-guide

Positioning Elements on the Web

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程