前端面试之居中布局

栏目: 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>
复制代码
前端面试之居中布局

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

查看所有标签

猜你喜欢:

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

暗趋势

暗趋势

王煜全 / 中信出版集团 / 2019-1 / 59元

《暗趋势》由得到“全球创新260讲”专栏主讲人王煜全,为你揭示藏在科技浪潮中的商业机会,教你获得把握趋势的能力,发现小趋势,抓住大机遇。 《暗趋势》聚焦于改变你生活和未来的产业,深度解读人工智能、混合现实、区块链、生物医疗等你必须关注的科技行业,并分析新科技给企业和个人带来的发展机遇,前瞻性提出企业和个人的思维与行动应对策略。 王煜全作为全球科技前哨侦察兵,以其每年5亿元的科技投资及2......一起来看看 《暗趋势》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具