前端面试之居中布局

栏目: Html · 发布时间: 5年前

内容简介:方法: 给行内元素父元素使用text-align: center方法: 块级元素使用margin: 0 auto。若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。

方法: 给行内元素父元素使用text-align: center

<style>
* {
    margin: 0;
    padding: 0;
}

.box {
    border: 1px solid blue;
    height: 200px;
    text-align: center;
}
.box > span {
    background: pink;
}
</style>
<div class="box">
    <span>行内元素水平居中</span>
</div>
复制代码
前端面试之居中布局

块级元素水平居中

方法: 块级元素使用margin: 0 auto。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 200px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box">
    <p>块级元素水平居中</p>
</div>
复制代码
前端面试之居中布局

fit-content + margin: 0 auto

若子元素包含float,为了让子元素水平居中,可让父元素宽度设置为fit-content,并且配合margin。

<style>
* {
    margin: 0;
    padding: 0;
}

    .box {
        border: 1px solid blue;
        height: 200px;
        width: fit-content;
        margin: 0 auto;
    }
    .box > p {
        float: left;
        width: 300px;
        background: pink;
    }
</style>
<div class="box">
    <p>块级元素水平居中: 子元素浮动</p>
</div>
复制代码
前端面试之居中布局

关于fit-content推荐阅读 理解CSS3 max/min-content及fit-content等width值

flex + justify-content: center

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: flex;
        justify-content: center;
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        width: 300px;
        background: pink;
    }
</style>
 <div class="box">
    <p>flex + justify-content: center</p>
</div>
复制代码
前端面试之居中布局

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 50%;
        background: pink;
        transform: translate(-50%, 0);
    }
</style>
 <div class="box">
    <p>宽度未知: absolute + transform</p>
</div>
复制代码
前端面试之居中布局

关于transform使用推荐阅读 理解SVG transform坐标变换

已知宽度: absolute + 负值的margin-left

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 50%;
        width: 300px;
        background: pink;
        margin-left: -150px; /*-0.5width*/
    }
</style>
<div class="box">
    <p>宽度已知: absolute + 负值的margin-left</p>
</div>
复制代码
前端面试之居中布局

宽度已知: absolute + left:0;right:0;margin:0 auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        position: absolute;
        left: 0;
        right: 0;
        width: 300px;
        background: pink;
        margin: 0 auto;
    }
</style>
<div class="box">
    <p>宽度已知: absolute + left:0;right:0;margin:0 auto</p>
</div>
复制代码
前端面试之居中布局

垂直居中

已知父元素高度情况: line-height: height

若元素是单行文本, 则可设置 line-height 等于父元素高度。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box > p {
        background: pink;
        line-height: 200px;
    }
</style>
 <div class="box">
    <p>已知父元素高度情况: line-height: height</p>
</div>
复制代码
前端面试之居中布局

已经父元素高度: 若元素是行内块级元素如img, 可以使用display: inline-block, vertical-align: middle和一个伪元素。

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        border: 1px solid blue;
        height: 200px;
    }
    .box::after {
        content: '';
        height: 100%;
    }
    .box > img, .box::after {
        display: inline-block;
        vertical-align: middle;
        width: 100px;
    }
</style>
<div class="box">
    <img src="./mm.png" alt="">
</div>
复制代码
前端面试之居中布局

flex + align-items: center

前端面试之居中布局

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        background: pink;
    }
</style>
 <div class="box">
    <p>absolute + transform</p>
</div>
复制代码
前端面试之居中布局

display: table

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: table;
        width: 100%;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        display: table-cell; /* 类似于表格中的单元格, 此时vertical-align: middle才生效 */
        vertical-align: middle;
    }
</style>
<div class="box">
    <p>flex</p>
</div>
复制代码
前端面试之居中布局

水平垂直居中

absolute + transform

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 200px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: pink;
    }
</style>
<div class="box">
    <p>absolute + transform</p>
</div>
复制代码
前端面试之居中布局

flex

前端面试之居中布局

table水平垂直居中

方法: inline-block + text-align + table-cell + vertical-align

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        display: table-cell;
        width: 100vw;
        height: 200px;
        border: 1px solid blue;
        text-align: center; /*水平居中*/
        vertical-align: middle; /*垂直居中*/
    }
    .box > span {
    }
    .box > p {
        width: 100px;
        display: inline-block; /* 防止块级元素宽度独占一行,内联元素可不设置 */
    }
</style>
<div class="box">
    <p>块级元素: table水平垂直居中</p>
</div>
<div class="box">
    <span>行内元素: table水平垂直居中</span>
</div>
复制代码
前端面试之居中布局

知道父元素高度,子元素高度

方法: 绝对定位方式+四个方向置0 + margin: auto

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        position: relative;
        height: 300px;
        border: 1px solid blue;
    }
    .box > p {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 100px;
    }
</style>
 <div class="box">
    <p>绝对定位方式+四个方向置0</p>
</div>
复制代码
前端面试之居中布局

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Data Structures and Algorithms in Java

Data Structures and Algorithms in Java

Michael T. Goodrich、Roberto Tamassia / Wiley / 2010-01-26 / USD 177.41

* This newest edition examines fundamental data structures by following a consistent object-oriented framework that builds intuition and analysis skills of data structures and algorithms * Presents ne......一起来看看 《Data Structures and Algorithms in Java》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具