14
2020
12

实现水平垂直居中

示例:


<div class="md-warp">

    <span class="md-main"></span>

</div>

.md-warp{

    width: 400px;

    height: 300px;

    max-width: 100%;

    border: 1px solid #000;

}

.md-main{

    display: block;

    width: 100px;

    height: 100px;

    background: #f00;

}

水平居中


margin法

需要满足三个条件

元素定宽

元素为块级元素或行内元素设置display:block

元素的margin:left或者margin-right都必须设置auto

三个条件缺一不可

.md-main{

    margin: 0 auto

}

定位法

元素定宽

元素绝对定位,并设置left:50%;

+元素负做边距margin-left为宽度的一半

.md-wrap{

    position:relative;

}

.md-main{

    position:absolute;

    left:50%;

    margin-left:-50px

}

有些时候元素宽度不是固定的,依然可以使用定位法实现水平居中用到css3中的transform属性中的translate


.md-warp{

    position: relative;

}

// 注意此时md-main不设置width为100px

.md-main{

    position: absolute;

    left: 50%;

    -webkit-transform: translate(-50%,0);

    -ms-transform: translate(-50%,0);

    -o-transform: translate(-50%,0);

    transform: translate(-50%,0);

}

文字水平居中

直接使用text-align:center即可


垂直居中


定位法

和水平居中类似,只是把left:50%换成top:50%,副边距和transform属性进行对应更改即可


优点:能在各个浏览器下工作,结构简单明了,不需要增加额外的标签


 .md-warp{

    position: relative;

}

.md-main{

    position: absolute;

    /* 核心 */

    top: 50%;

    margin-top: -50px;

}

不确定高度的时候


.md-warp{

    position: relative;

}

.md-main{

    position: absolute;

    top: 50%;

    // 注意此时md-main不设置height为100px

    -webkit-transform: translate(0,-50%);

    -ms-transform: translate(0,-50%);

    -o-transform: translate(0,-50%);

    transform: translate(0,-50%);

}

单行文本垂直居中

需要满足两个条件:


元素内容是单行,并且其高度是固定不变的

将其line-height设置成height的值一样

div{

    width: 400px;

    height: 300px;

    border: 1px solid #000;

}

span{

    line-height: 300px;

}

视窗单位的解决办法


让元素在视窗中居中,使用vh实现


.md-warp{

    position: relative;

}

.md-main{

    position: absolute;

    margin: 50vh auto 0;

    transform: translateY(-50%);

}

Flexbox的解决方案


完成这项工作只需要两个样式,在需要水平垂直居中的父元素中设置display:flex和在水平存执居中的元素设置margin:auto


.md-wrap{

    display:flex

}

.md-main{

    display:auto

}

Flexbox的实现文本的水平垂直居中同样很简单


 .md-warp{

    display:flex;

}

.md-main{

    display: flex;

  align-items: center;

  justify-content: center;

    margin: auto;

}

绝对垂直居中


.md-wrap{

    position: relative;

}

.md-main{

    position:absolute;

    top:0'

    right:0

    bottom:0;

    left:0;

    margin:auto;

}

最好不要使用绝对定位,因为他对整体的布局影响相当的大

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。