Web开发中盒子居中的几种方法
我要评论一、记录下几种盒子居中的方法：
1.0、margin固定宽高居中；
2.0、负margin居中；
3.0、绝对定位居中；
4.0、table-cell居中；
5.0、flex居中；
6.0、transform居中；
7.0、不确定宽高居中(绝对定位百分数)；
8.0、button居中。
二、代码演示(html使用同一个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: -100px -100px;
background-color: #0ff;
}
3.0、绝对定位居中(演示)
利用绝对定位居中，非常常用的一种方法。
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以及IE9一下不兼容。
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(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #0ff;
}
7.0、不确定宽高居中(绝对定位百分数)(演示)
这种不确定宽高的居中，较为灵活。只需要保证left和right的百分数一样就可以实现水平居中，保证top和bottom的百分数一样就可以实现垂直居中。
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做外容器，里边的块元素会自动垂直居中，只需要控制一下水平居中就可以达到效果。
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
相关文章
- 这篇文章主要为大家详细介绍了css实现移动端图片文字水平居中的方法，如何实现图片以及文字的整体水平居中，本文为大家提供两种解决办法，感兴趣的小伙伴们可以参考一下2016-03-11
- 这篇文章主要介绍了利用CSS的Sass预处理器来制作居中效果的教程,围绕Sass mixin的编写方法进行讲解,同时介绍了如何使用Flexbox来让子元素居中,需要的朋友可以参考下2016-03-10
- 垂直居中是布局中十分常见的效果之一，这篇文章主要介绍了纯CSS实现垂直居中的9种方法，感兴趣的小伙伴们可以参考一下2016-03-09
- 单选框和复选框面积很小，不容易点击，造成许多用户的困扰，用户体验不佳，所以表单元素的垂直居中让很多网页布局师为之而困扰，想实现垂直居中效果还真需要一番功夫，还好2013-02-16
整理CSS中遇到的一些常见问题(Hack标识/固定容器/图片垂直居中)
本文整理了一些CSS中遇到的一些常见问题:IE浏览器模式Hack标识/代码中遇到的一些常见问题/固定容器图片垂直居中等，感兴趣的朋友可以参考下，顺便巩固一下知识，希望本文对2013-01-24- 元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题，也在这里给予了解决方法，感兴趣的朋友可以了解下啊，希望本文可以帮助到你2013-01-18
- css中让文本居中的属性很简单就可以实现，那就是设置text-align:center即可,让元素水平居中，相信对于许多网页设计师而言都不会陌生,首先，要 让元素水平居中，就必须得了2013-01-11
- 简单总结一下html中元素的 水平居中、垂直居中、绝对居中的实现方式,感兴趣的朋友可以了解下哦2013-01-07
让IE也支持margin居中告别text-align:center
谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 IE 下居中一直使用 text-align:center 居中的童鞋,接下来介绍让IE也支持margin居中的实现方法2012-12-31- 其核心原理其实与第二种利用font-size大小实现IE下图片垂直居中是一致的。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical2012-12-07
最新评论