CSS基础知识总结之----居中_css samp居中-优快云博客

本文链接：https://blog.youkuaiyun.com/sytloveyxj/article/details/107508330

本文总结了CSS中实现水平和垂直居中的多种方法，包括行内元素和块级元素的居中策略，如通过display属性切换元素类型，以及使用line-height、margin、position和flex等技巧。此外，还介绍了各种CSS布局方式在不同场景下的适用性和兼容性问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、水平居中

一种是行内元素居中：

<div class='outer'>
    <div class='inner'></div>
</div>

.outer{
  text-algin:center
}

一种是块级元素居中

.inner{
	width:100px;   //width必须设置，不然看不出居中效果
	margin: auto; 
	}

ps:display

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block -- 显示为块级元素
display:inline -- 显示为内联元素
display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

2、垂直居中

1）如果是在一行的，设置line-height = height，或者使用padding-top，padding-bottom

.outer {
   height: 200px;
   line-height: 200px;
   border: 1px solid red;
}

2）块级元素，绝对定位，需要提前知道尺寸，margin-top: -(高度的一半); margin-left: -(宽度的一半);

.outer {
    position: relative;
    height: 200px;
}
.inner {
    width: 80px;
    height: 40px;
    background: blue;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -40px;
}

3）块级元素：绝对定位 + transform，不需要提前知道尺寸，但是，兼容性不好

.outer {
    position: relative;
    height: 200px;
}
.inner {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: blue;
}

4）块级元素：绝对定位 + margin: auto;

.outer {
    position: relative;
    height: 200px;
}
.inner {
    width: 80px;
    height: 40px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: blue;
}

5）块级元素：table-cell

.outer {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: table;
}
.inner {
    display: table-cell;
    vertical-align: middle;
}

.outer {
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    /* *display: block;
    *font-size: (heightX0.873);
    *font-family: arial; */
}

<div class="outer">
    <span class="inner">it's the test 1234tdhcija</span>
</div>

.outer {
    width: 400px;
    height: 300px;
    display: table-cell;        
    vertical-align: middle;
    border: 1px solid red;
}
.inner {
    display: inline-block;
    vertical-align: middle;
    background: blue;
}

6）块级元素：display:flex

.outer {
    width: 600px;
    height: 200px;
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;  /*水平居中*/
}
.inner {
    background: blue;
}

7)display:inline-block

<div class="outer">
    <div class="inner1">child</div>
    <div class="inner2">brother</div>
</div>

.outer {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    position: relative;
}
.inner1, .inner2 {
    display: inline-block;
    vertical-align: middle;
}
.inner1 {
    background: blue;
    font-size: 12px;
}
.inner2 {
    height: 400px;
    font-size: 10px;
}