在开发过程中, 很多需求需要我们居中一个 div, 比如 html 文档流当中的一块 div, 比如弹出层内容部分这种脱离了文档流等. 不同的情况有不同的居中方式, 接下来就分享下一下几种常用的居中方式.
CSS 设置 div 居中的方法:
1,text-align:center 方式
HTML 代码:
- <div class="center">
- <span class="center_text">
- 123
- </span>
- </div>
CSS 代码:
- .center{
- text-align:center;
- }
- center_text{
- display:inline-block;
- width:500px
- }
这种方式可以水平居中块级元素中的行内元素, 如 inline,inline-block;
但是如果用来居中块级元素中的块级元素时, 如 div 中的 div, 一旦内层的 div 有自己的宽度, 这种方法就会失效. 只能让里面 div 的文字等内容居中, 而 div 仍然是左对齐的.
还有一种情况, 当内部的元素脱离了文档流, display:absolute 的情况下, 不管是否是块级元素, 都会居中, 但是这种居中不是基于内部 div 的内容的, 而是内部 div 最左端, 内部 div 的最左端在 div 的中间(前提外部 div 设置了 position:relative/absolute/fixed);
2,margin:0 auto 方式
HTML 代码:
- <div class="center">
- <span class="center_text">
我是块级元素, 我是块级元素, 我给自己设了 display:block
</span>
</div>
CSS 代码:
- center_text{
- display:block;
- width:500px<br> margin:0 auto;
- }
这种对齐方式要求内部元素 (.content_text) 是块级元素, 并且不能脱离文档流(如设置 position:absolute), 否则无效.
3, 脱离文档流的居中方式.
这种通常应用在自定义弹框当中, 把背景层设置成透明灰色, 内容居中显示在最前面.
HTML 代码:
- <div class="mask">
- <div class="content"><br> 我是要居中的板块
- </div>
- </div>
CSS 代码:
- .mask{
- display: block;
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: #000;
- filter: alpha(opacity=30);
- -ms-filter: "alpha(opacity=30)";
- opacity: .3;
- z-index: 10000;
- }
- .center{
- display: block;
- position: fixed;
- _position: absolute;
- top: 50%;
- left: 50%;
- width: 666px;
- height:400px;
- margin-left: -333px;
- margin-top: -200px;
- z-index: 10001;
- box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;
- background-color: #fff;
- }
效果图:
这种居中方式, 把内部 div 设置宽高之后, 再设置 top,left 各为 50%, 设置完之后, 这里是按照左端居中的, 接着我们使用负边距的方式调整, 将 margin-top 设置为负的高度的一半, margin-left 设置为负的宽度的一半, 就可以居中了.
这种方式还有一种居中方法就是设置 margin:-(内部 div 高度的一半) auto; 这用就不用设置 left 的值了.
4,display:table-cell
display:table-cell 配合 width,text-align:center,vertical-align:middle 让大小不固定元素垂直居中, 这个方式将要对其的元素设置成为一个 td,float,absolute 等属性都会影响它的实现, 不响应 margin 属性;
示例:
HTML 代码:
- <div class="center">
- <div class="center_text">
- 1111111<br> </div>
- </div>
CSS 代码:
- .center {
- display: table;
- width: 100%;
- }
- .center_text {
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- }
效果图:
5, 垂直居中
行内元素的垂直居中把 height 和 line-height 的值设置成一样的即可.
示例:
HTML 代码:
- <div class="center">
- <span class="center_text">
我是要居中的内容 < br> </span>
</div>
CSS 代码:
- center{
- height:40px;
- line-heigth:40px;<br>}
这样内部的 span 标签就可以居中了.
来源: http://www.css88.com/qa/css3/12797.html