全国服务热线:4008-888-888

技术知识

Web开发设计中盒子垂直居中的几种方式

1、纪录下几种盒子垂直居中的方式:
 
1.0、margin固定不动宽高垂直居中;
 
2.0、负margin垂直居中;
 
3.0、肯定精准定位垂直居中;
 
4.0、table-cell垂直居中;
 
5.0、flex垂直居中;
 
6.0、transform垂直居中;
 
7.0、不确定性宽高垂直居中(肯定精准定位百分数);
 
8.0、button垂直居中。
 
2、编码演试(html应用同1个Demo):
 
html Demo:
 
<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>
 
 
1.0、margin固定不动宽高垂直居中(演试)
 
这类精准定位方式纯碎是靠宽高和margin拼出来的,并不是很灵便。
 
CSS:
 
#container {
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    width: 200px;
    height: 200px;
    margin: 150px 200px;
    background-color: #0ff;

 
2.0、负margin垂直居中(演试)
 
运用负的margin来开展垂直居中,必须了解固定不动宽高,限定较为大。
 
CSS:

#container {
    position: relative;
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin: ⑴00px ⑴00px;
    background-color: #0ff;
}
 
3.0、肯定精准定位垂直居中(演试)
 
运用肯定精准定位垂直居中,十分常见的1种方式。
 
CSS:

#container {
    position: relative;
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    position: absolute;
    width: 200px;
    height: 200px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: #0ff;
}
 
4.0、table-cell垂直居中(演试)
 
运用table-cell来操纵竖直垂直居中。
 
CSS:
 
#container {
    display: table-cell;
    width: 600px;
    height: 500px;
    vertical-align: middle;
    border: 1px solid #000;
}
#box {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: #0ff;
}
 
5.0、flex垂直居中(演试)
 
CSS3中引进的新合理布局方法,较为功能强大。缺陷:IE9和IE91下兼容问题。
 
CSS:
 
#container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
            align-items: center;
    -webkit-justify-content: center;
            justify-content: center;
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    width: 200px;
    height: 200px;
    background-color: #0ff;

 
6.0、transform垂直居中(演试)
 
这类方式灵便应用CSS中transform特性,较为奇特。缺陷是IE9下兼容问题。
 
CSS:

#container {
    position: relative;
    width: 600px;
    height: 600px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    position: relative;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(⑸0%, ⑸0%);
    -webkit-transform: translate(⑸0%, ⑸0%);
    -ms-transform: translate(⑸0%, ⑸0%);
    -moz-transform: translate(⑸0%, ⑸0%);
    background-color: #0ff;
}
 
7.0、不确定性宽高垂直居中(肯定精准定位百分数)(演试)
 
这类不确定性宽高的垂直居中,较为灵便。只必须确保left和right的百分数1样便可以完成水平垂直居中,确保top和bottom的百分数1样便可以完成竖直垂直居中。
 
CSS:

#container {
    position: relative;
    width: 600px;
    height: 500px;
    border: 1px solid #000;
    margin: auto;
}
#box {
    position: absolute;
    left: 30%;
    right: 30%;
    top: 25%;
    bottom: 25%;
    background-color: #0ff;
}
 
8.0、button垂直居中(演试)
 
运用button做外器皿,里面的块元素会全自动竖直垂直居中,只必须操纵1下水平垂直居中便可以做到实际效果。
 
HTML:
 
<button>
    <div></div>
</button>

CSS:

button {
    width: 600px;
    height: 500px;
    border: 1px solid #000;
}
div {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background-color: #0ff;
}

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

原文连接:http://www.cnblogs.com/likar/archive/2016/06/16/5590948.html



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服