CSS水平居中、垂直居中、水平垂直居中

浮玉
207 阅读7分钟

什么是块元素，什么是行内元素？

行内元素：　　

  • 与其他行内元素并排
  • 不能设置宽高，默认的宽度就是文字的宽度

块级元素：

  • 霸占一行，不能与其他任何元素并列。
  • 能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

常见的行内元素和块元素

行内元素

  • a - 锚点

  • abbr - 缩写

  • acronym - 首字

  • b - 粗体(不推荐)

  • bdo - bidi override

  • 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 - 定义变量

块元素

  • address - 地址
  • blockquote - 块引用
  • center - 举中对齐块
  • dir - 目录列表
  • div - 常用块级容易，也是css layout的主要标签
  • dl - 定义列表
  • fieldset - form控制组
  • form - 交互表单
  • h1 - 大标题
  • h2 - 副标题
  • h3 - 3级标题
  • h4 - 4级标题
  • h5 - 5级标题
  • h6 - 6级标题
  • hr - 水平分隔线
  • isindex - input prompt
  • menu - 菜单列表
  • noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
  • noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
  • ol - 排序表单
  • p - 段落
  • pre - 格式化文本
  • table - 表格
  • ul - 非排序列表

水平居中

块元素

  • 父元素不是块元素先设置成块元素，再加text-align: center
 <span class="wrap">
        <span class="center">我是要居中的元素</span>

    </span>

  .wrap {
        display:block;
        width: 400px;
        height: 400px;
        background-color: blue;
        text-align: center;
    }
    .center {
        
        color: #fff;
    }

行内元素

  • 父元素是块元素，直接给父元素加text-align: center
<div class="wrap">
        <span>我是要居中的元素</span>

    </div>

  .wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
        text-align: center;
    }
    .center {
        
        color: #fff;
    }

宽度一定的块元素

  • 谁要居中，就给它设置margin: 0 auto
 <div class="wrap">
        <div class="center">我是要居中的元素</div>

    </div>

.wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
    }
    .center {
        width: 200px;
        height: 200px;
        margin: 0 auto;
        background-color: orange;
    }

不定宽度的块元素

  • 默认子元素的宽度和父元素的宽度一样，需要给子元素设置display: inline-block或者inline,将块元素转为行内元素，父元素设置text-align:center
  <div class="wrap">
        <div class="center">我是要居中的元素</div>

    </div>

  .wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
        text-align: center;
    }
    .center {
        background-color: orange;
        display:inline;
    }

不定宽度 使用CSS3的transform:translateX(-50%)

  <div class="wrap">
        <div class="center">我是要居中的元素</div>

    </div>

  .wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
        position: relative;
    }
    .center {
       
        position: absolute;
        background-color: orange;
        left: 50%;
        transform: translateX(-50%);
    }

定宽度 先margin-left: 设置为宽度的一半就行

  <div class="wrap">
        <div class="center">我是要居中的元素</div>

    </div>


    .wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
        position: relative;
    }

    .center {
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: orange;
        left: 50%;
        margin-left: -150px;

    }

使用弹性盒布局Flexbox

  • 给父元素设置display: flex; justify-content: center;
<div class="wrap">
        <div class="center">我是要居中的元素</div>

    </div>

    .wrap {
        width: 400px;
        height: 400px;
        background-color: blue;
        display: flex;
        justify-content: center;
    }

    .center {
        width: 300px;
        height: 300px;
        position: absolute;
        background-color: orange;

    }

垂直居中

使用vertical-align: middle; display: table-cell;

<div class="wrap">
        <span
            class="center">我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素</span>
    </div>

   .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: table-cell;
        vertical-align: middle;
    }

    .center {
        background-color: orange;
    }

弹性盒布局

<div class="wrap">
        <span
            class="center">我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素</span>
    </div>

 .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        align-items: center;
        
    }

    .center {
        background-color: orange;
    }

高度一定

  • 设置margin-top值为自身高度的50%，top：50%;
<div class="wrap">
        <div
            class="center">我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素</div>
    </div>

  .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
        
    }

    .center {
        
        height: 100px;
        position: absolute;
        top: 50%;
        margin-top: -50px;
        background-color: orange;
    }

高度不定CSS3的transform: translateY(-50%)

<div class="wrap">
        <div
            class="center">我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素我是要居中的元素</div>
    </div>

  .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
        
    }

    .center {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: orange;
    }

水平垂直居中

弹性盒布局

<div class="wrap">
        <div
            class="center">我是要居中的元素</div>
    </div>

    .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: flex;
        justify-content: center;
        align-items: center;
        
    }

    .center {
     
        background-color: orange;
    }

定位

tranform+absolute该方法也适用于子元素是行内元素、行内块元素、块元素，适用性比较广

<div class="wrap">
        <div
            class="center">我是要居中的元素</div>
    </div>

 .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: orange;
    }

元素宽度高度一定

 <div class="wrap">
        <div class="center">我是要居中的元素</div>
    </div>

    .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -50px;
        margin-top: -40px;
        height: 80px;
        width: 100px;
        background-color: orange;
    }

calc+定位

  • 使用calc计算好元素的left和top保证元素的水平垂直居中
 <div class="wrap">
        <div class="center">我是要居中的元素</div>
    </div>

 .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .center {
        position: absolute;
        top: calc(50% - 40px);
        left: calc(50% - 50px);
        height: 80px;
        width: 100px;
        background-color: orange;
    }

margin: auto +定位

  • 对于块级元素通过设置 margin: auto; 可以使得元素水平方向居中，但是却不能让其垂直方向居中，因为如果不设置块级元素的width值，默认100%，铺满父元素，不设置height不会铺满
 <div class="wrap">
        <span class="center">我是要居中的元素</span>
    </div>


 .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        position: relative;
    }

    .center {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: 80px;
        width: 100px; 
        margin: auto;
        text-align: center;
        background-color: orange;
    }

line-height

table-cell

  • 让父元素具有td特点
  • vertical-align: middle; 用来设置的行内元素本身（inline）, 行内块元素（inline-block）本身 或者 td 元素（table-cell box）内容垂直方向的排列方式

行内块元素

<div class="wrap">
        <div class="center">我是要居中的元素</div>
    </div>

  .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .center {
        display: inline-block;
        height: 110px; 
        width: 100px;
        background-color: orange;
    }
  • 行内元素
 <div class="wrap">
        <span class="center">我是要居中的元素</span>
    </div>

   .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    .center {
        display: inline-block;
        height: 110px;
        width: 100px;
        background-color: orange;
    }

line-height

  • 行内元素
 <div class="wrap">
        <span class="center">我是要居中的元素</span>
    </div>

   .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        line-height: 300px;
        text-align: center;
    }

    .center {
        line-height: 300px;
        background-color: orange;
    }
  • 行内块元素（借助于vertical-align:middle;）
<div class="wrap">
        <div class="center">我是要居中的元素</div>
    </div>

   .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        line-height: 300px;
        text-align: center;
    }

    .center {
        display: inline-block;
        vertical-align: middle;
        line-height: initial;
        height: 200px;
        width: 200px;
        background-color: orange;
    }

grid布局

  • 新出来的，兼容性比较差，还没有流行使用，使用需谨慎
  <div class="wrap">
        <div class="center">我是要居中的元素</div>
    </div>

    .wrap {
        width: 500px;
        height: 500px;
        background-color: blue;
        display: grid;
        justify-items: center;
        align-items: center;
    }

    .center {
        height: 200px;
        width: 200px;
        background-color: orange;
    }
avatar
文章
阅读
粉丝