CSS元素分类及CSS样式居中大全

最新推荐文章于 2023-02-28 14:59:14 发布

FL_csdn1

最新推荐文章于 2023-02-28 14:59:14 发布

阅读量1.6k

点赞数

分类专栏： Web前端 HTML+ CSS 文章标签： html css css3 经验分享其他

本文链接：https://blog.youkuaiyun.com/FL_csdn1/article/details/113713913

版权

Web前端同时被 2 个专栏收录

21 篇文章

订阅专栏

HTML+ CSS

9 篇文章

订阅专栏

前言：

在布局HTML页面中CSS居中作为布局中的常用手段，是我们必须要掌握的技能，也是前端开发人员必备的基础，在学习CSS居中的所有方法之前，我们需要了解CSS的三个元素的分类，不同的元素有着不同的居中方式，了解清楚不同元素的特性在结合其居中的方式可以使我们在布局中更加得心应手；在这里仅以此篇博客做一个CSS居中方式的总结，也可作为一个工具手册。

文章目录

一、CSS元素分类

行内(内联)元素

1.特点：

和其他兄弟元素同在一行，不用另起一行
宽高以及到顶部和底部的边距都不可以设置
宽度受内容挤压，即它的宽度就是它内容的宽度
只能容纳内联元素和文本，通常被包含在块级元素中使用
不可设置宽width，高height
可设置内边距和外边距
各个内联元素有间隙

2.代表标签：

a – 超链接
img – 图片
input – 输入框
span – 常用内联容器，定义文本内区块
b – 粗体(不推荐)
br – 换行
strong – 粗体强调
textarea– 多行文本输入框

块级元素

1.特点

自己独占一行
高度，宽度、外边距以及内边距都可以控制。
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素。

2.代表标签：
div、p、h1…h6、ol、ul、dl、table、form

注意：只有文字才能组成段落,因此 p 里面不能放块级元素，特别是 p 不能放div，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内块元素

1.特点

和其他元素都在一行上
元素的宽、高以及顶部和底边距可以设置
如果没有设置宽高，宽高由内容决定

2.代表标签
img，input

元素之间的模式转换

1.转换为块级元素

display: block; 转化为块级元素

2.转换为行内块元素

display：inline-block; 转换为行内块

3.转化为行内元素

display： inline; 转换为行内元素。

4.转换为块级表格元素

display：table;转换为块级表格元素

5.转换为弹性盒子

display：flex；转换为弹性盒子

注意：一般情况下会将行内元素转化为块级元素或者行内块元素,如果需要给行内元素设置宽度或者高度的情况下，我们才需要进行模式转换。

二、CSS水平居中方式

块级元素水平居中

第一种方式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
     body {
        background-color: rgb(179, 178, 178);
      }
      div {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div>测试文字</div>
  </body>
</html>

效果图：
在这里插入图片描述
利用margin：0 auto可以实现块级元素的水平居中。

第二种方式：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      div {
        position: absolute;
        width: 700px;
        height: 300px;
        border: 1px solid red;
        left: 50%; //向右偏移一半
        transform: translate(-50%);//在向左移动元素本身的一半
      }
    </style>
  </head>
  <body>
    <div>测试文字</div>
  </body>
</html>

效果图：
在这里插入图片描述
这种方式利用定位偏移量和transform属性实现居中，注意一定要配合定位一起使用。该方法很适合未知宽度情况的元素，如轮播图中的圆点控制器

行内元素水平居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      div {
        width: 600px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <span>测试文字</span>
    </div>
  </body>
</html>

效果图：
在这里插入图片描述
注意居中行内元素时需要将居中的属性（text-align：center）写到需要居中元素的父元素上面

行内块元素水平居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      div {
        width: 600px;
        height: 300px;
        border: 1px solid red;
        margin: 0 auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <img src="./img/屏幕截图 2021-02-06 205909.png" alt="" />
    </div>
  </body>
</html>

效果图：
在这里插入图片描述
原理与行内元素的居中方式一样都是在其父元素上添加text-align：center属性
还有一种方式将目标元素转换为弹性盒子（display：flex），在利用justify-content: center属性进行居中，这里就不再过多的赘述。

三、CSS垂直居中方式

行内元素垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      div {
        width: 700px;
        height: 300px;
        border: 1px solid red;
        line-height: 300px;
      }
    </style>
  </head>
  <body>
    <div>
      测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，测试文字
    </div>
  </body>
</html>

效果图：
在这里插入图片描述
这种方式只需将内部元素的行高设置为与父元素相同的高度即可实现垂直居中，（line-height：高度px ）样式需要写到父元素样式中

块级元素垂直居中

第一种方式-利用定位和外边距实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      .father {
        position: relative;
        width: 700px;
        height: 300px;
        border: 1px solid red;
      }
      .son {
        position: absolute;
        height: 50px;
        top: 50%;
        margin-top: -25px;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">
        测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，
      </div>
    </div>
  </body>
</html>

效果图：
在这里插入图片描述
这样的方式配合定位将内部元素距离顶部一半，接着利用外边距向顶部移动元素本身的一半，这样就可以实现垂直居中的样式，注意此方式必须配合定位和知道需要居中元素的高度的情况下使用。

第二种方式-利用定位和转换实现：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      .father {
        position: relative;
        width: 700px;
        height: 300px;
        border: 1px solid red;
      }
      .son {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">
        测试文字，测试文字，测试文字，测试文字，测试文字，测试文字，
      </div>
    </div>
  </body>
</html>

效果图：
在这里插入图片描述
这种方式和第一种方式一个原理，只是这种方式适用于需要垂直居中没有高度的元素的情况，利用2d转换和定位偏移量实现

第三种方式-利用display转换表格：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      .father {
        display: table;
        width: 700px;
        height: 300px;
        border: 1px solid red;
      }
      .son {
        display: table-cell;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">测试文字</div>
    </div>
  </body>
</html>

在这里插入图片描述
将需要居中的元素的父级转换为表格块级元素，子元素转换为单元格元素，利用vertical-align: middle;属性实现垂直居中

第四种方式-利用弹性盒子布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      .father {
        width: 700px;
        height: 300px;
        border: 1px solid red;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">测试文字</div>
    </div>
  </body>
</html>

在这里插入图片描述
·此方法的原理是将父级元素设置成为弹性盒子，将子元素纵向排列，利用 justify-content: center; 实现垂直居中显示

行内块元素垂直居中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: rgb(179, 178, 178);
      }
      .father {
        width: 700px;
        height: 300px;
        border: 1px solid red;
      }
      .father::before {
        content: " ";
        display: inline-block;
        height: 100%;
        width: 1%;
        vertical-align: middle;
      }
      .son {
        display: inline-block;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="son">测试文字</div>
    </div>
  </body>
</html>