元素主要是块级元素 ,行内块元素,行元素三种;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    1.行内元素:
    超链接：<a></a>
    加粗：<strong></strong> <b></b>
    图片：<img src=" " />
    输入框：<input type="text">
    下拉框：<select name=" " id=" "></select>
    标签：<label for=" "></label>
    行内元素：<span></span>
    文本框：<textarea name="" id="" cols="30" rows="10"></textarea>
    按钮：<button></button>
    2.块级元素
    块内元素：<div></div>
    段落标签：<p></p>
    表格：<table></table>
    表格标题：<caption></caption>
    表单：<form action=" "></form>
    标题：h1~h6
    列表：<ul>
        <li></li>
    </ul>
    <dl>
        <dt></dt>
    </dl>
    <dl>
        <dd></dd>
    </dl>
    2.块级元素与行内元素的区别
    （1）块级元素独占一行不与其他元素共享，而行内元素则可以和其他元素共享一行
    (2)块级元素可以直接设置宽高，行内元素则不可以直接设置宽高
    (3)块级元素可以包含其他块级元素和行内元素，而行内元素只能包含文本和其他行内元素

</body>
</html>

居中包括水平居中和垂直居中.

块级元素 display:block; 可设置宽高加背景颜色纵向排列

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div style="width: 500px;height: 500px;background-color: red;">

        我是块级元素
    </div>

</body>

</html>

行内块元素 display:inine-block; 可设置宽高加背景颜色横向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<select style="width: 200px;height: 200px;background-color: red;"> </select>
<select style="width: 200px;height: 200px;background-color: rgb(140, 19, 170);"></select>
</body>

</html>

行内元素 display:inine; 不可设置宽高,可加背景颜色横向平铺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>

a{
    width: 50px;
    height: 50px;
    background-color: red;
}
 </style>
</head>
<body>
    <a href=" # "> 你好,大家好1!&emsp; </a>
    <a href=" # "> 你好,大家好2!&emsp;</a>
    <a href=" # "> 你好,大家好3!&emsp;</a>

</body>
</html>

居中属性如下:

1.最快捷方法弹性盒子 display:flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: blue;
            display: flex;
        }
        p {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 整体居中水平和垂直 */
            margin: auto;

        }
    </style>
</head>

<body>
    <div> <p> 我要居中,我是块元素</p>   </div>
 

</body>

</html>

2：使用margin进行固定长度的偏移
在使用margin进行具体高度的偏移时，需要知道父元素和子元素的具体的宽高尺寸
1：水平方向居中
在进行水平方向上的居中时，可对子元素样式使用 margin:0 auto

垂直方向居中
在使用margin进行垂直方向上的居中时。前提条件分别是：高度塌陷解决
1）为父元素设置border；
2）为父元素设置padding；
3）在父元素中添加overflow：hidden的样式。(存在定位会出现定位隐藏缺陷)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: blue;
            border: 10px solid transparent;
            
        }
        p {
            width: 100px;
            height: 100px;
            background-color: red;
            /* 进行平移  外边距 */
            /* 上下平移 */
           margin-top: 200px;
           /* 左右平移 */
           margin-left: 200px;

        }
    </style>
</head>

<body>
    <div> <p> 我要居中,我是块元素</p>   </div>
 

</body>

</html>

同样可达到水平垂直居中的效果,但是后期不利于维护,尺寸变化了就不居中;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: blue;
            position: relative;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            margin-top: 50%;
            margin-left: 50%;
            left: -50px;
            top: -50px;
        }
    </style>
</head>

<body>
    <div>
        <p> 我要居中,我是块元素</p>
    </div>


</body>

</html>

还有在父元素中居中和浏览器中居中;

二. 行内块元素居中(可使用弹性盒子以及定位的方式进行居中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 div{text-align:center;}  
    div img{vertical-align:middle;}  
    /* 后加一个空白元素  行内块   利用基线进行垂直居中  不得是baseline   */
    div:after{content:"";display:inline-block;vertical-align:middle;height:100%;width:0;}

div{ 

background-color: aqua;
width: 500px;
height:500px;
/* 利用行高垂直居中 */
line-height: 500px;
 
}

div img {
width: 100px;
height: 100px;

}
    </style>
</head>
<body>
    <div class="box">
        <img src="../75e8502fc8dfcc94111baae7a7f2805.png"alt="">
      </div>
</html>

三.行元素居中

text-align:center(完全适用水平居中) 垂直居中line-height=行高(利用行高垂直居中)

学无止境,加油!

原文链接：https://blog.csdn.net/weixin_68030167/article/details/123780128